d3.js - How to draw circles at different times with D3js? -
using d3js, need draw(append) circles, not less 1 second of distance. 1 circle in x position, 1 in y position after 0.5 second.
use settimeout. here working code snippet.
var nodes = [{ "name": "6", "x": 207, "y": 305 }, { "name": "7", "x": 404, "y": 310 }, { "name": "8", "x": 420, "y": 510 }, { "name": "9", "x": 540, "y": 126 }, { "name": "10", "x": 350, "y": 150 }, { "name": "11", "x": 177, "y": 320 }, { "name": "12", "x": 200, "y": 190 }, { "name": "13", "x": 170, "y": 150 }, { "name": "14", "x": 107, "y": 510 }, { "name": "15", "x": 104, "y": 150 }, { "name": "16", "x": 104, "y": 150 }, { "name": "17", "x": 310, "y": 160 }, { "name": "18", "x": 120, "y": 110 }, { "name": "19", "x": 619, "y": 145 }, { "name": "20", "x": 148, "y": 107 }, { "name": "21", "x": 575, "y": 107 }]; var width = 500, height = 400; var color = d3.scale.category20(); var svg = d3.select("#map").append("svg") .attr("width", width) .attr("height", height); nodes.foreach(function(d, i) { settimeout(function() { svg.append("circle") .datum(d) .attr("class", "node") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", "10") .style("fill", function(d) { return color(i); }); }, 500 * i); });
.node { stroke: #fff; stroke-width: 1.5px; } .overlay { fill: none; pointer-events: all; } #map{ border: 2px #555 dashed; width:500px; height:400px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <body> <div id="map"></div> </body>
Comments
Post a Comment