.each（）回调（D3）中触发的平滑过渡

Question

我创建了一个在D3的selection.each()调用的过渡，但是回调和过渡之间有一些延迟。 我希望过渡似乎是连续的，而不是稍有延迟。 我试过使用不同的持续时间和延迟值，但无济于事。 这是相关的代码。

transition();

function transition() {

    data.map( (d) => {
        d.x = d3.random.normal(d['x'], 5)();
        d.y = d3.random.normal(d['y'], 5)();
        return d;
    });

    g.selectAll('path')
        .data(data)
        .transition()
        .duration(400)
        .attr('d', (d, i) => line( getPath(d, i) ) )
        .each('end', transition);

}

如您在该工作码本中所见 ，转换之间有一些延迟。 我希望过渡似乎是连续的。 我该怎么做？

Answer 1

几点...

1. d3过渡中的默认缓动不是线性的，因此这就是您感觉到延迟的原因。
2. 实际上，您在每个单独的路径转换完成后都设置了一个新的转换。 each方法针对选择中的每个节点进行回调，并且在d3转换中没有内置的endall事件，但是您可以如下所示进行操作。

第一点可能是最重要的。 第二点只是避免不必要地重新应用过渡并中断先前应用的过渡。 可能不是可以理解的，但还是好的做法。

这是一个有效的例子...

 var colors = [ '#FFAA5C', '#DA727E', '#AC6C82', '#685C79', '#455C7B' ] var line = d3.svg.line() .x( (d) => dx ) .y( (d) => dy ) .interpolate('linear'); var svg = d3.select('body').append('svg'); var svgW = d3.select('svg').node().clientWidth; var svgH = d3.select('svg').node().clientHeight; var w = svgW/4; var h = svgH/4; var data = [ {x: -w/2, y: -h/4}, {x: 0, y: -h/2}, {x: w/2, y: -h/4}, {x: w/Math.PI, y:h/2.5}, {x: -w/4, y: h/2.5} ]; var getPath = (d, i) => { var path = []; var startPoint = { x: 0, y: 0 }; // point 1 path.push(startPoint); // point 2 path.push(d); // point 3 path.push(data[i + 1] || data[0]); // point 4 path.push(startPoint); return path; } var g = svg.append('g') .attr('transform', 'translate(' + svgW/2 + ',' + svgH/2 + ')'); g.selectAll('path') .data(data) .enter().append('path') .attr({ fill: (d, i) => colors[i] }); transition(); function transition() { data.map( (d) => { dx = d3.random.normal(d['x'], 5)(); dy = d3.random.normal(d['y'], 5)(); return d; }); g.selectAll('path') .data(data) .transition() .ease("linear") .duration(50) .attr('d', (d, i) => line( getPath(d, i) ) ) .call(endall, function(){window.requestAnimationFrame(transition)}); } function endall(transition, callback) { if (transition.size() === 0) { callback() } var n = 0; transition .each(function() { ++n; }) .each("end", function() { if (!--n) callback.apply(this, arguments); }); } 

 body { background-color: #181818; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; } svg { overflow: visible; width: 100%; height: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>