CODEWITHSUNDEEP
svgd3.js
SolessChong
SolessChong

Reputation: 3407

How to redraw the svg filled with circles in D3?

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?

Upvotes: 1

Views: 4183

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.

Upvotes: 3

Related Questions