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


i'm following this zoom example. in case, don't know how redraw data svg.

in example, svg initialized 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 redrawn in function "zoomed"

svg.select(".line")         .attr("class", "line")         .attr("d", line); 

while in 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 redraw doesn't work.

so how redraw this?

in redraw function, need set attributes changed. line, d attribute, contains information determines how line drawn. circle, position of circle , radius. is, redraw function 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 you're changing, may have set different set of attributes. is, if you're not changing radius, there's no need set that, if you're changing fill color, need set well.


Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -