如何用D3js在不同的时间画圆圈？

Question

使用 d3js，我需要绘制（追加）圆圈，不是全部在一起，而是距离小于一秒。所以 0.5 秒后 x 位置一个圆圈，y 位置另一个圆圈。

Answer 1

使用设置超时。这是工作代码片段。

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>

Answer 2

您可以使用标准 javascript 方法 setTimeout or setInterval 一个接一个地附加圆，延迟时间取决于圆索引。

或者，您可以使用标准的 d3 语法正常创建所有圆圈，但将不透明度设置为 0，然后添加一个 .transition()，延迟取决于将不透明度设置为 1[=14 的索引=]

这是后一个选项的有效 jsfiddle：http://jsfiddle.net/pg5m3m3n/5/

摘录：

canvas.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr({
        'cx': function(d) { return d.x; },
        'cy': function(d) { return d.y; },
        'r': 10,
        'opacity': 0
    })
    .transition().delay(function(d,i) { return i*50; })
    .attr('opacity',1);

这样做的优点是它使用了 d3 语法，它只比普通追加多了 2 行代码，缺点是圆圈实际上是立即添加的，并且只是一个接一个地可见，这可能会提高性能如果要追加的圆圈数量很大，就会出现问题。

如何用D3js在不同的时间画圆圈？

How to draw circles at different times with D3js?

visualization

d3.js