您可以使用D3.js将数据绑定到A-Frame基本类型吗？

Question

我正在尝试使用D3.js根据数据值更改12 A帧<a-box>的高度。制作3D条形图。

A框架下面的代码可以正常工作，但高度，宽度和深度不受d3的影响。

 <a-scene>
    <!-- Bar chart-->
    <a-entity>
        <a-box  position=".5 -1 .5"  color="#000000"></a-box>
        <a-box  position="1.5 -1 .5" color="#FFFFFF"></a-box>
        <a-box  position="2.5 -1 .5" color="#000000"></a-box>
        <a-box  position=".5 -1 1.5" color="#FFFFFF"></a-box>
        <a-box  position="1.5 -1 1.5" color="#000000"></a-box>
        <a-box  position="2.5 -1 1.5" color="#FFFFFF"></a-box>
        <a-box  position=".5 -1 2.5"  color="#000000"></a-box>
        <a-box  position="1.5 -1 2.5" color="#FFFFFF"></a-box>
        <a-box  position="2.5 -1 2.5" color="#000000"></a-box>
        <a-box  position=".5 -1 3.5"  color="#FFFFFF"></a-box>
        <a-box  position="1.5 -1 3.5" color="#000000"></a-box>
        <a-box  position="2.5 -1 3.5" color="#FFFFFF"></a-box>
    </a-entity>

    <a-light color="#da47da" position="0 0 0" type="ambient"></a-light>
    <a-entity light="type: point; color: #EEE; intensity: 0.5" position="0 3 0"></a-entity>
    <a-entity position="0 0 0" rotation="0 0 0">
        <a-entity camera look-controls wasd-controls></a-entity>
    </a-entity>

    <!-- Sky -->
    <a-sky color="#c8f7f0"></a-sky>
</a-scene>

<script>

    // fake sample data
    var data = [10, 20, 30, 15, 25, 35, 40,
        45, 50, 70, 100, 120]

    var yscale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, 3])

    var scene = d3.select("a-scene")

    var bars = scene.selectAll("a-box")
        .data(data)
        .attr({
            position: (d, i) => {
                y = yscale(d) / 2;
                return x + "" + y + "" + z + "";
            },

            height: d => d,
            width: d => 0.9,
            depth: d => 0.9,
        })

</script>

Answer 1

 bars.enter().append("a-entity")
    bars.attr("height", function (d) { return yscale(d) });
    bars.attr("width", function (d) { return 0.9 });
    bars.attr("depth", function (d) { return 0.9 });

我使用了错误的语法。 d3 v5显然不允许多个属性。