1

在这段代码中，http ://enjalot.com/inlet/4124664/

其中主要部分是：

    function render(data) {

        var nodz = svg.selectAll(".node")
            .data(data);

        nodz.enter().append("g")
            .attr("class", "node")
            .attr("id", function(d) { return "id"+d[0]+d[1]; })
            .attr("x",0)
            .attr("y", 0)
            .attr("transform", function(d) {
                return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
            })
            .append("text")
            .attr("x", 0)
            .attr("y", 0)
            .attr("stroke", "black")
            .text(function(d) {return d[2]; });


        // update
        nodz.selectAll("text")
            .text(function(d) {
                return d[2]; });

        // another go
        d3.selectAll("text")
            .text(function(d) {
                return d[2]; });


     }


    // data in form [x pos, y pos, value to display]

    var nodes = [[0,0,0],[1,1,0],[1, -1,0],[2,0,0], [2,2,0]];
    render(nodes);

    nodes2 = [[0,0,1],[1,1,1],[1, -1,1],[2,0,1], [2,2,1], [2, -2,1]];
    render(nodes2);

我调用代码两次绘制一些节点。

我希望它在第一遍中绘制五个值为零的节点，

然后我将另一个项目添加到列表中并将所有值更新为 1，因此希望看到所有值都更改为 1 并出现一个新节点。相反，我只看到最后一个设置为 1。我尝试添加一个唯一 id 以将节点绑定到数据，但这不起作用。还尝试重新选择以查看数据现在是否已绑定。在我经历过的所有教程中，只需调用 selectAll().data() 部分即可更新数据，我错过了什么？

4

1 回答 1

1

第二个可选参数.data()是一个告诉 d3 如何匹配元素的函数。那是您需要比较您的 ID 的地方，请参阅文档。也就是说，在您的情况下，它应该在没有 ID 的情况下工作，因为它默认按索引匹配。

更新文本的问题在于，在调用之后.selectAll()您需要.data()再次调用以让 d3 知道您想要与该选择匹配的内容（即新数据应该绑定到旧数据）。

于 2012-11-21T16:12:48.303 回答