我正在尝试使用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>
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 });
我用错了语法。d3v5显然不允许多个属性。