在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中更新数据连接的子元素

回答

相关问题