Problems with IndexedFaceSet in X3Dom + D3

Question

I'm using D3 to markup X3Dom as in this example: http://bl.ocks.org/jbeuckm/5620882

I converted the example to use simple squares instead of boxes: http://bl.ocks.org/jbeuckm/5645205

In a later version, I started loading data and calling plotAxis and plotData from various callbacks. It works as expected if I draw boxes as in the first example:

shape.append("x3d:box");

But when I substitute my 2-triangle face set...

shape.append("x3d:indexedFaceSet")
        .attr("coordIndex", "0 1 2 -1  2 3 0 -1")
        .attr('solid', 'false')
        .append("x3d:coordinate")
        .attr("point", "-1 -1 0,  1 -1 0,  1 1 0,  -1 1 0")

it doesn't work and I get this error:

Uncaught TypeError: Cannot call method 'getPoints' of null
x3dom.registerNodeType.defineClass.nodeChanged  x3dom.js:3175
x3dom.NodeNameSpace.setupTree  x3dom.js:1929
domEventListener.onNodeInserted  x3dom.js:1296
append  d3.v2.js:3701
d3_selectionPrototype.select  d3.v2.js:3606
d3_selectionPrototype.append  d3.v2.js:3707
plotData  tran_3d.html:132
(anonymous function)  tran_3d.html:240
st.Callbacks.f  jquery-1.9.0.min.js:1
st.Callbacks.p.fireWith  jquery-1.9.0.min.js:1
st.extend.Deferred.st.each.i.(anonymous function)  jquery-1.9.0.min.js:1
(anonymous function)  tran_3d.html:280
d3.json  d3.v2.js:2950
ready  d3.v2.js:2940

It looks like maybe the "node-inserted" code analyzes the shape before the <Coordinate> child has been added to the <IndexedFaceSet>. But, I'm not sure why the same append statement would work in one context and not another. Again, just appending an x3d:box works fine in my data-loading setup, but the x3d:indexedFaceSet throws the error.

Answer 1

A workaround is to build up the IndexedFaceSet node separately, then generate the markup string for the node, then use D3's selection.html(str) to append the node to the shape. In the code referenced above, "shape" is a selection of data-bound nodes, so the workaround is like this:

shape.each(function(d){

   var newNode = "<indexedFaceSet coordIndex="..."><coordinate point="..."/></indexedFaceSet>";

   d3.select(this).html(newNode);
});