Question

我在调试为什么尝试使用d3 v4重新编写此block时遇到问题，直到第二次调用drawWithData时才会出现圆圈。您可以点击“添加”按钮。或者＆＃39;画＆＃39;看到效果。

除了将力对象更改为v4模拟对象之外，绘制画布和DOM对象过渡的方式应该相同。

对于那些想要看一眼的人来说jsfiddle。以下是函数drawWithData（数据，模拟）的内容：

circles = container.selectAll('circle')
                   .data(data);

// Insertion animation.
newCircles = circles.enter()
                    .append('circle')
                    .attr("id", function(d, i){ return d.id; })
                    .attr('r', 0)
                    .attr('alpha', 1)
                    ;

circles.transition()
        .duration(500)
        .attr('r', function(d){
            return d.r;
        });

// Deletion animation
dyingCircles = circles.exit();
dyingCircles.transition()
            .duration(200)
            .attr('r', 0)
            .attr('alpha', 0)
            .remove();

simulation.on('tick', function() {
    var renderStart = new Date();
    context.clearRect(0, 0, width, height);
    context.fillStyle = "rgb(70, 130, 180)";
    context.beginPath();

    circles.each(function(d) {
        context.moveTo(d.x, d.y);
        var radius = d3.select(this).attr('r'); // because d.r contains the final value
        context.arc(d.x, d.y, radius, 0, 2 * Math.PI);
    });

    dyingCircles.each(function(d) {
        context.moveTo(d.x, d.y);
        var alpha = d3.select(this).attr('alpha');
        context.fillStyle = "rgb(70, 130, 180, "+alpha+")";
        var radius = d3.select(this).attr('r'); // because d.r contains the final value
        context.arc(d.x, d.y, radius, 0, 2 * Math.PI);
    });

    context.fill();

    time += (new Date() - renderStart);
    ticks++;
});

Answer 1

我改变了：

circles.transition()
        .duration(500)
        .attr('r', function(d){
            return d.r;
        });

为：

newCircles.transition()
        .duration(500)
        .attr('r', function(d){
            return d.r;
        });

并且“绘制”按钮在第一次单击时起作用。如下所示，当你转换dyingCircles时，你想对newCircles做同样的事情。

D3 v4 enter（）转换无法在第一次调用时在画布上绘制圆圈

1 个答案: