How to redraw the svg filled with circles in D3? - svg

Question

I'm following this zoom example. In my case, I don't know how to redraw my data for my svg.
In the example, the svg is initialized like this
chartBody.append("svg:path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var line = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.value);
});
And is redrawn like this in function "zoomed"
svg.select(".line")
.attr("class", "line")
.attr("d", line);
While in my case
Init:
userSvg.selectAll("circle")
.data(userNodes.slice(1))
.enter().append("svg:circle")
.on("click", function(d){ console.log(d.ind); })
.on("mousemove", function(d){ brushOnUser(d.ind); })
.on("mouseout", function(){ brushOnUser(); })
.attr("r", function(d) { return d.radius; })
.attr("cx", function(d, i) { return userNodesScaleX(d.x); })
.attr("cy", function(d, i) { return userNodesScaleY(d.y); })
.style("fill", function(d, i) { return 'gray'; });
Redraw:
userSvg.selectAll("circle")
.attr("class", "circle");
Of course this redraw doesn't work.
So how do I redraw this?

Answer 1

In the redraw function, you need to set all the attributes that are changed. For a line, this is basically only the d attribute, as it contains all the information that determines how the line is drawn. For a circle, this would be the position of the circle and the radius. That is, your redraw function would look something like this.
userSvg.selectAll("circle")
.attr("r", function(d) { return d.radius; })
.attr("cx", function(d, i) { return userNodesScaleX(d.x); })
.attr("cy", function(d, i) { return userNodesScaleY(d.y); });
Depending on what you're changing, you may have to set a different set of attributes. That is, if you're not changing the radius, then there's no need to set that, but if you're changing the fill color, you would need to set that as well.