Question

所以我正在进行迭代，将信息插入到圆形对象中进行显示。

<script type="text/javascript">
var data = d3.json("example.json", function(error, data){
    console.log("I'm working");
    console.log(data);
    var svg = d3.select("svg");
    console.log(data.length);
    for (i = 0; i < data.length; i ++) {
        svg.append("circle")
            .attr("cx", Math.random()*500)
            .attr("cy", Math.random()*500)
            .attr("r", 25)
            .attr("fill", "red")
            .append("text")
            .text(function(d) { return data[i].name } )
            .attr('dx', function(d) {return '1em';})
    .attr('dy', function(d) {return (0.08*this.parentNode.getBBox().height/2 + 0.5)+'em';})
    }
    svg.selectAll("circle").attr("fill", "red");
    svg.selectAll("text").attr("fill", "black")
})

到目前为止，我已将信息附加到每个圈子。但是我仍然无法显示对象的名称，我不知道如何通过数据显示连接。

Answer 1

您无法像这样定义文字回调。

.text(function(d) { return data[i].name } )

通过这样做，我将始终设置为10，因为它是你的for循环结束时的值，你似乎不会改变它。您有许多解决方案，以下不是最好的但应该有效，可以使用d3文档和回调中使用d参数建立更清晰的解决方案。

.text(function(d) { return data[this.i].name }.bind({i : i}) )

迭代对象以将信息放入d3圈

1 个答案: