Question

In this code, http://enjalot.com/inlet/4124664/

of which the main part is:

    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);

I call the code to draw some nodes twice.

I expect it to draw five nodes with a value of zero in the first pass,

Then I add another item to the list and update all the values to 1 so expect to see all the values change to 1 and a new node appear. Instead, I’m only seeing the last one being set to 1. I’ve tried adding a unique id to bind the node to the data but this isn’t working. Also tried reselecting to see if the data is now bound. In all the tutorials I’ve been through, just calling the selectAll().data() part updates the data, what am I missing?

Answer 1

The second optional argument to .data() is a function that tells d3 how to match elements. That’s where you need to compare your IDs, see the documentation. That said, it should work without IDs in your case as it matches by index by default.

The problem with updating the text is that after calling .selectAll() you need to call .data() again to let d3 know what you want to match to that selection (i.e. that the new data should be bound to the old data).