Question

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

Answer 1

使用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>

Answer 2

您可以使用标准的javascript方法setTimeout或setInterval逐个追加圈子，并根据圈子索引添加可变延迟。

或者，您可以使用标准d3语法创建所有圆圈，但不透明度设置为0，只需添加.transition()延迟，具体取决于将不透明度设置为1的索引

这是后一个选项的工作方式：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行代码，con是圆圈实际上是立即添加的，只是逐个可见，这可能会产生性能问题，如果要追加的圈子数量巨大。

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

2 个答案: