In your example above it seems that the entered nodes have no defined class. Any subsequent d3.selectAll(".name") will return an empty selection and all data elements will show up under .enter() method.

You might want to try assigning the corresponding classname every time entering nodes are appended:


You might also want to consider using the second argument of .data() to define a unique identifier (key) for each datapoint, ensuring that correct elements are exited on each update, if the order is different.

In your code "name" property could probably be used as a key:

var person_name = svg.selectAll(".name")
            .data(data,function(d) { return; })

Finally I notice that you are appending the axes inside the update function. This means a new set of axes will be appended on every update on top of the previous ones. You might want to move those out to the top level.

Related Query

More Query from same tag