使用d3和.data（）輸入文本

Question

這很簡單，但對我不起作用。

見這個例子中它曾經工作..

我已經創建了一個div，就像這樣（#stats_data div已經存在）：

d3.select('#stats_data')
        .append('div')
        .attr('id', 'stats_data5')
        .text("626")

現在在DOM中。

現在，我想基於D3.json函數更改該文本。 代碼很簡單，但是根本無法正常工作。 我知道您可以使用d3.select更改文本，但數據綁定功能無法運行。

d3.json("data/statsdata.json", function(statsData){
    d3.select('#stats_data5')
    .data(statsData)
    .text( function(d){
            console.log('test');
        return d.year2012;
    });

我們什么也沒有，沒有console.log或其他任何東西。

最好的方法是什么？

Answer 1

您的第一個片段在做正確的事情，在DOM上選擇要修改的元素，但我會將其重寫為變量（並刪除626文本）。 所以像這樣：

var aDiv = d3.select('body')
    .append('div')
    .attr('id', 'stats_data5');

然后，再次選擇它時，只需參考aDiv。 在下一部分中，您需要將數據綁定到使用d3創建的新元素。 因此，您需要使用enter() 。 您還必須告訴d3創建或append 。 所以像這樣：

aDiv.selectAll("p")  //select all the empty p 
    .data(data)      // grab the data
    .enter()         // bind it to those previously empty p
  .append("p")       // add the p's t the DOM 
    .text( function(d){ // and you know what this does
        return d;
    });

您可以在小提琴中看到所有這些

Answer 2

假設您對data/statsdata.json調用返回一個對象（而不是對象數組）：

var statsData5 = d3.select('#stats_data5');
d3.json("data/statsdata.json", function(statsData) {
  statsData5.text(statsData.year2012);
});