jsonファイルのデータを表すサークルパックレイアウトがあります。キーボードの左右の矢印をクリックすると、パックのレイアウトが更新されます。円の位置は更新できましたが、半径は更新できませんでした。以下のコードをご覧ください。私のサークルパックは実際には階層的ではありません。つまり、親が1つ、IDが「coreCircle」のサークル、そしてその中にすべての子があります。
ありがとう、RM
var pack = d3.layout.pack()
.value(function(d) {
return d.someField;
})
.children(
function children(d) {
return d.someArray;
});
var corevis = d3.select('#svgCoreGroup');
// Creating the circle packed core
var gNodes = corevis.data([json]).selectAll("g.node")
.data(pack.nodes, function(d) {return (d.children ? "coreCircle" : d.name)});
// Remove
gNodes.exit().remove()
// Update
corevis
.data([json]).selectAll("g.node")
.data(pack.nodes, function(d) {return (d.children ? "coreCircle" : d.name)})
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("id", function(d) { return d.children ? "coreCircle" : null; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.selectAll("circle")
.transition()
.duration(500)
.attr("r", function(d) { return d.children ? coreSize : d.r; });
var node = gNodes
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("id", function(d) { return d.children ? "coreCircle" : null; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.children ? coreSize : d.r; })