I have a problem with a visualization in d3.js.

I have three groups containing almost identical visualizations, being a take on "multiple small" visualizations. The visualization incorporates a timeline, upon change of which appropriate data points have to be added/removed. Here's the code that does the updating:

var channels = { bt: { x: 0, y: -100 }, sms: { x: -300, y: 200 }, call: { x: 300, y: 200 } };
        //Draw web for each channel
        for (channel in channels) {
            this.circles[channel] = this.web[channel].selectAll("circle")
                   .data(this.displayedNodes, function (d) {
                       return d.id;
                   });

            this.circles[channel].exit().transition().duration(500).attr("r", 0).remove();

            this.circles[channel].enter()
                   .append("circle")
                   .attr("class", "person")
                   .attr("r", 0)
                   .attr("cx", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).x;
                   })
                   .attr("cy", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).y;
                   })
                   .attr("fill", function (d) {
                       //return chart.clusterColors[d.cluster];
                       return chart.colors[channel];
                   })
                   .attr("stroke-width", 2)
                   .attr("stroke", function (d) {
                       return d3.rgb(chart.colors[channel]).darker();
                   })
                   .attr("id", function (d) {
                       return "bubble_" + d.id;
                   })
                   .on("mouseover", function (d, i) {
                       return chart.show_details(d, i, this);
                   })
                   .on("mouseout", function (d, i) {
                       return chart.hide_details(d, i, this);
                   });
        }

The .exit().transition().remove() part does nothing, the circles just slide away, as their data value is now 0. However if I open the Chrome console and manually type in exactly the same thing this evaluates to, it works fine. I assume this has something to do with JavaScript's asynchronous model, I'm not a JS wiz, so I am a bit at a loss here, this should be fine in any other language...

Any ideas are much appreciated!

To add from the ments, as they are being huge:

Working example: / Code: .js

To see the problem: Drag the grey rectangle on the timeline (resize by draggin edges) onto the area at the end, that does not have data - the circles should disappear as per exit().transition().remove() but don't. If I set a break point at that area however and type the same in the Chrome console, they do.

I have a problem with a visualization in d3.js.

I have three groups containing almost identical visualizations, being a take on "multiple small" visualizations. The visualization incorporates a timeline, upon change of which appropriate data points have to be added/removed. Here's the code that does the updating:

var channels = { bt: { x: 0, y: -100 }, sms: { x: -300, y: 200 }, call: { x: 300, y: 200 } };
        //Draw web for each channel
        for (channel in channels) {
            this.circles[channel] = this.web[channel].selectAll("circle")
                   .data(this.displayedNodes, function (d) {
                       return d.id;
                   });

            this.circles[channel].exit().transition().duration(500).attr("r", 0).remove();

            this.circles[channel].enter()
                   .append("circle")
                   .attr("class", "person")
                   .attr("r", 0)
                   .attr("cx", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).x;
                   })
                   .attr("cy", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).y;
                   })
                   .attr("fill", function (d) {
                       //return chart.clusterColors[d.cluster];
                       return chart.colors[channel];
                   })
                   .attr("stroke-width", 2)
                   .attr("stroke", function (d) {
                       return d3.rgb(chart.colors[channel]).darker();
                   })
                   .attr("id", function (d) {
                       return "bubble_" + d.id;
                   })
                   .on("mouseover", function (d, i) {
                       return chart.show_details(d, i, this);
                   })
                   .on("mouseout", function (d, i) {
                       return chart.hide_details(d, i, this);
                   });
        }

The .exit().transition().remove() part does nothing, the circles just slide away, as their data value is now 0. However if I open the Chrome console and manually type in exactly the same thing this evaluates to, it works fine. I assume this has something to do with JavaScript's asynchronous model, I'm not a JS wiz, so I am a bit at a loss here, this should be fine in any other language...

Any ideas are much appreciated!

To add from the ments, as they are being huge:

Working example: http://www.student.dtu.dk/~s103826/ Code: https://github./haljin/d3-webchart/blob/master/Sensible/js/WebChart.js

To see the problem: Drag the grey rectangle on the timeline (resize by draggin edges) onto the area at the end, that does not have data - the circles should disappear as per exit().transition().remove() but don't. If I set a break point at that area however and type the same in the Chrome console, they do.

• javascript
• d3.js

• It should work like that -- can you post a plete working example please? – Lars Kotthoff Commented Nov 13, 2013 at 18:28
• @LarsKotthoff Here is the working example: link And here's the full code: link – Haljin Commented Nov 13, 2013 at 19:03
• The example looks ok to me -- I don't see any shrinking circles. Where exactly is it going wrong? – Lars Kotthoff Commented Nov 13, 2013 at 19:50
• 1 If you select the time period where there is no data as indicated by the timeline (the very end) the circles should disappear pletely, as this.displayedNodes is [] – Haljin Commented Nov 13, 2013 at 19:54
• 2 Right, it looks like immediately after the loop, you're starting new transitions for all the circles. This will overwrite any previous transitions. – Lars Kotthoff Commented Nov 13, 2013 at 20:37

1 Answer 1

Thanks to Lars for help, I was re-selecting all circles, rather than using the existing update selection this.circles :)

I feel silly now.