Можете ли вы привязать данные, используя D3. js к примитивам A-Frame? - PullRequest
Новая
       6

Можете ли вы привязать данные, используя D3. js к примитивам A-Frame?

0 голосов
/ 25 марта 2020

Я пытаюсь изменить высоту 12 A-кадра <a-box> на основе значений данных с использованием D3. js. Создание 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>

1 Ответ

0 голосов
/ 25 марта 2020 
 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 явно не поддерживает несколько атрибутов.

...