在D3中擴展路徑並轉換

我一直在努力解決與D3中的轉換有關的問題。考慮以下代碼：在D3中擴展路徑並轉換

svg.selectAll("path") 
    .data(data, key) 
    .enter().append("path") 
    .attr("d", someFunctionThatReturnsAPath); 
});

我呼籲在setTimeout幾秒鐘後以下：

svg.selectAll("path") 
    .transition() 
    .duration(2000) 
    .attr("d", someFunctionThatReturnsADifferentPath); 
});

第二次調用正確更新的路徑，但不設置過渡動畫效果。爲什麼在d屬性在第二次調用中更新時沒有轉換？

請注意，路徑非常複雜。在這兩個調用中，在實際繪製路徑之前存在明顯的延遲。也許這與缺乏轉型有關？

我是D3的新手，但我已經閱讀過渡，並且似乎無法理解爲什麼這不像我所期望的那樣行事。

更新

每@ Marjancek的回答，我提供有關這兩個調用的函數的更多細節。

這裏是someFunctionThatReturnsAPath定義：

function(d) { 
    var coordinates = []; 

    for (var i = d.track.length - 1; i >= 0; i--) { 
    // We only care about the last 10 elements 
    if (coordinates.length >= 10) 
     break; 
    coordinates.push(d.track[i]); 
    } 
    return path({type: "LineString", coordinates: coordinates}); 
};

而且someFunctionThatReturnsADifferentPath：

function(d) { 
    var coordinates = []; 

    for (var i = d.track.length - 1; i >= 0; i--) { 
    // We only care about the last 20 elements 
    if (coordinates.length >= 20) 
     break; 
    coordinates.push(d.track[i]); 
    } 
    return path({type: "LineString", coordinates: coordinates}); 
};

其中路徑被定義如下（projection是d3.geo.albersUsa()）：

var path = d3.geo.path() 
    .projection(projection);

的目標是在第二次呼叫時，該線路將擴展10個較新的數據點。

來源

2013-03-23 David Chouinard

如果你的路徑不具有相同數量的點，過渡可能不會達到預期效果。嘗試.attrTween：http://github.com/mbostock/d3/wiki/Transitions#wiki-attrTween在bl.ocks.org上有一個例子，但該網站似乎目前處於關閉狀態，所以我無法鏈接到它。

添加編輯：我想的要點是：https://gist.github.com/mbostock/3916621當站點備份時，bl.ocks鏈接將爲http://bl.ocks.org/mbostock/3916621。

來源

2013-03-23 23:23:53

太好了，謝謝你的指針。 GitHub早些時候倒閉了，這可能是bl.ocks.org崩潰的原因。你現在有沒有鏈接？ – 2013-03-24 00:46:40

我添加了答案的鏈接 – 2013-03-24 01:37:14

這是不可能知道沒有看你的someFunctionThatReturnsADifferentPath;但我猜測你的不同功能沒有考慮到它所接收到的三個參數的插值。

閱讀轉換文檔：https://github.com/mbostock/d3/wiki/Transitions

來源

2013-03-23 16:04:03 Marjancek

我已經更新了我的問題並提供了您請求的說明。我已經閱讀了大量文檔，但我會更詳細地閱讀它。 – 2013-03-23 16:17:03

在D3中擴展路徑並轉換

回答

相關問題