时间戳

首页 > 解决方案 > 您可以使用 D3.js 将数据绑定到 A-Frame 基元吗？

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

问题描述

我正在尝试<a-box>根据使用 D3.js 的数据值更改 12 A 框架的高度。制作 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>

标签： javascriptd3.jsaframe

解决方案

 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 显然不允许多个属性。

推荐阅读