簡體   English   中英

.each()回調(D3)中觸發的平滑過渡

[英]Smooth transition triggered in .each() callback (D3)

我創建了一個在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);

}

如您在該工作碼本中所見 ,轉換之間有一些延遲。 我希望過渡似乎是連續的。 我該怎么做?

幾點...

  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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM