javascript - How to chain a function call in D3? -
defined draw function in order reuse, it's standalone statement.
draw(circles);
is there way put (rewrite) draw function d3's function chain?
svg.selectall("circle") .data(dataset) .enter() .append("circle") .draw(???) //not work.
here code. working version here
<body> <script type="text/javascript"> var draw = function (circles) { circles.attr("cx", function (d, i) { return (i * 50) + 25; }) .attr("cy", h / 2) .attr("r", function (d) { return d; }); }; var w = 500, h = 50; var dataset = [5, 10, 15, 20, 25]; var dataset2 = [25, 20, 15, 10, 5]; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); var circles = svg.selectall("circle") .data(dataset) .enter() .append("circle") draw(circles); var circles2 = svg.selectall("circle") .data(dataset2) .transition() .duration(2000); draw(circles2); </script> </body>
use call() + in draw(). working version here
var draw = function () { this.attr("cx", function (d, i) { return (i * 50) + 25; }) .attr("cy", h / 2) .attr("r", function (d) { return d; }); }; circles .data(dataset) .enter() .append("circle") .call(draw) .data(dataset2) .transition() .attr("fill", "red") .duration(2000) .call(draw);
Comments
Post a Comment