How to scale a shape using d3 and x3dom?

Question

I am trying to create a 3d "chart" using d3 data-binding and x3dom.

The data-binding seems to work correctly and I am able to generate HTML which looks correct, but x3dom does not show the expected scale (as in the size of the shape is not scaled at all).

The code is fairly simple. First, I bind data points to transforms:

var t = scene.selectAll('transform').data(data);
var transform = t.enter();

var shape = transform.append('transform')
        .attr('translation', function (d, i) {
           ...
        }).append('shape');

Within each transform element created for a data-point, I use this code to create a box:

shape.append('box').attr('size', '1, 1, 1');

Then, I expect to scale the boxes later using the data, using a transition:

t.transition().attr('scale', function (d) {
        return "1.0 1.0 " + d.size;
    });

This only works if I run the whole function that does the above twice, the second time in a setInterval() function!

I am a newbie, so I am certainly missing something here, but the code does generate what I expect and does work if run twice, for whatever reason. So, why doesn't it just work first time?

Note: I could of course just set the size directly instead of using an animation to do that later by scaling the shapes, but that also didn't work. It seems that the shapes never get the correct size using either technique, unless I run them twice.