使用d3js重新排序svg dom

我使用d3來呈現svg。我有對象的數組，每一個顏色屬性，就像這樣：使用d3js重新排序svg dom

data = [{'color': 'red'}, {'color': 'blue'}];

我有一個更新功能，以畫圓用那些顏色，就像這樣：

function update(data) { 
    var circle = svg.selectAll('circle').data(data, function(d) {return d.color}) 
     .enter() 
     .append('circle').attr('r', 50) 
     .attr('cx', function (d, i) {return 50 + (i * 50)}).attr('cy', 50) 
     .attr('fill', function (d) {return d.color}); 
    circle.order(); 
}

我的理解是，函數的最後一行circle.order（）應該重新排列svg dom中的節點以匹配數據的順序。但是，我更改了數組順序並再次調用更新函數，但它似乎沒有做任何事情。

的jsfiddle演示：http://jsfiddle.net/du7mh/

我需要控制DOM爲了把某些元素的前景，因爲沒有的z-index在SVG。任何幫助將不勝感激，謝謝！

來源

2014-01-13 eshan

您需要使用進入退出更新的選擇。請參閱Mike的[本教程]（http://bost.ocks.org/mike/join/）。或者一個祕籍的方法就是在你發佈的小提琴的更新函數的頂部選擇all（「circles」）。remove（）'。在svg 2.0中有一個用於z-index方法的佔位符，但我不知道這是否發生 - 請參閱[本討論]（https://groups.google.com/forum/#!topic/ d3-js/JCXKef_GRCQ）在谷歌組 – user1614080

更新運行一次後，附加選項中沒有任何內容。設置circle等於當前和新元素的作品：

function update(data) { 
    var circle = svg.selectAll('circle').data(data, function(d) {return d.color}); 
    circle.enter() 
     .append('circle').attr('r', 50) 
     .attr('cx', function (d, i) {return 50 + (i * 50)}).attr('cy', 50) 
     .attr('fill', function (d) {return d.color}); 
    circle.order(); 
}

http://jsfiddle.net/du7mh/3/

來源

2014-01-13 07:29:35

Woops，我想這只是一個鏈式的事故！謝謝您的幫助。 – eshan

使用d3js重新排序svg dom

回答

相關問題