使用d3js，我需要绘制（附加）圆，不是全部都画出来，而是距离小于一秒。因此，在0.5秒钟后，一个圆在x位置，另一个圆在y位置。
使用setTimeout。这是工作代码段。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句