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
Post a Comment