Question

这很简单，但对我不起作用。

请参阅this example 使用工作的地方..

我创建了一个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创建的 new 元素。所以你需要使用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;
    });

您可以在this fiddle

中看到这一切

Answer 2

假设您对data/statsdata.json的调用正在返回一个对象（而不是一个对象数组）：

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

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

2 个答案: