Question

其中主要部分是：

    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（）部分更新数据，我缺少什么？

Answer 1

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

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

D3为什么我的数据不更新？

1 个答案: