在d3.js中更新數據連接的子元素

我無法在d3中掌握基本操作：爲更改的數據集更新子元素。子元素需要「附加」第一遍，並修改後續傳遞。對於可以使用「輸入」操作進行控制的父元素，但我無法看到如何將它用於孩子。我正在使用氣泡佈局，但我不認爲這是問題。在d3.js中更新數據連接的子元素

var node = vis.selectAll("g.node").data(
bubble.nodes(classes(json)).filter(function (d) { 
    return !d.children; 
}), function (d) { 
    return d.className; 
}); 

node.select("circle").attr("r", function (d) { 
    return d.r; 
}); 

node.enter().append("g").attr("class", "node") 
    .attr("transform", function (d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
}); 

node.append("circle").attr("r", function (d) { 
    return d.r; 
});

下面是運行代碼的jsfiddle http://jsfiddle.net/johnpoole/xsafy/131/。

來源

2013-04-10 elk-tamer

我不清楚你想要做什麼。您添加到「父級」的組似乎不用於任何內容，並且在更新時似乎沒有選擇這些圈子。你想達到什麼目的？ – 2013-04-11 08:35:28

感謝您的回覆。我正在嘗試創建氣泡佈局，並在更新期間更改圓圈的半徑。將圓/子添加到節點/父級以顯示該圓及其半徑。在更新過程中不選擇圓圈（引用新的半徑）是問題所在。 – 2013-04-11 15:36:30

爲什麼要添加'g'元素？只需添加圈子就足夠了。 – 2013-04-11 16:07:39

答案最終找到了我。這只是做一個關於輸入（）的原始「附加」的問題

var node = vis.selectAll("g.node").data(
    bubble.nodes(classes(json)).filter(function(d) { 
     return !d.children; 
    }), function(d) { 
     return d.className; 
    }); 

node.select("circle").attr("r", function(d) { 
     return d.r; 
    }).style("fill", function(d) { 
     return fill(d.r); 
    }); 

node.enter().append("g").attr("class", "node") 
.attr("transform", function(d) { 
     return "translate(" + d.x + ","+ d.y +  ")";}) 
    .append("circle").attr("r", function(d) { 
     return d.r; 
}).style("fill", function(d) { 
     return fill(d.className); 
});

來源

2013-04-11 19:51:02

你有使用上面的代碼更新的小提琴嗎？ – snowgage 2013-11-05 23:22:06

在d3.js中更新數據連接的子元素

回答

相關問題