如何使用d3在文本上顯示數組？

Question

我正在使用Gridster庫，並且創建了一個Gridster框：

<li data-sizey="2" data-sizex="2" data-col="3" data-row="1">
    <div class="gridster-box" id="box1">
        <div class="handle-resize"></div>
    </div>
</li>

在我的JS文件中，我從后端調用JSON響應

function createGraph() {
    d3.json("/hours", function (data){
        // Stuff here
    }
}

如瀏覽器控制台中所示，響應為

Object {initial_hours: Array[19]}
initial_hours: Array[19]

數組包含的位置：

0: 1800
1: 1700
2: 1030
3: 1130
4: 950
5: 1249
6: 1225
7: 1821
8: 1250
9: 1505
10: 38
11: 130
12: 1520
13: 1600
14: 1330
15: 1930
16: 1806
17: 1535
18: 1855
length: 19

如何在Gridster框中將此數組打印為文本？

Answer 1

您的問題似乎主要是d3問題，即將數據數組綁定到某些DOM元素。 以下是json數據的模擬，以及如何將其數據附加到DOM。

我將數組數據列表分為三列，但是您可以通過調整x和y函數來解決這個問題。

var svg = d3.select("svg");

var jsonResObj = {
               initial_hours: [
                  1800, 1700, 1030, 1130, 950, 1249, 1225, 1821, 1250,
                  1505, 38, 130, 1520, 1600, 1330, 1930, 1806, 1535
                ]
              };

var text = svg.selectAll('text')
    .data(jsonResObj.initial_hours)
   .enter().append('text')
    .attr("x", function(d,i){return 100 * (i % 3)})
    .attr("y", function(d,i){return 20 * ( Math.floor(i/3) ) })
    .attr("fill", "#000")
    .text(function(d){return d});

您應該能夠通過使用id或class選擇來對gridster做同樣的事情，例如

var svg = d3.select("#box1");

這里有一個小提琴以上。