单击其他元素添加SVG元素

Question

我在d3中制作了一些圈子。单击这些圆圈时我需要添加更多圆圈，并使现有圆圈消失（不应删除它们，因为我将再次使用它们）。

我现在这样做的方式是通过听原始圈子上的点击事件。 （这些是使用.selectAll('circle.nodes')

创建的

.on("click",function(d){
  //do stuff}).duration(1000);
   populateSubCircles);

我希望子圆圈出现在中心周围（我查看了我的计算，看起来它们是正确的）。

  var populateSubCircles = function(){
    var subCircles = nodesG.selectAll("circles.subNodes").data(....

这正确地添加了次要圆圈，并且cx和cy似乎是正确的（离中心圆圈不太远）。但是，它们似乎没有出现在页面上（它们出现在0,0的左上角）。为什么会这样？我该如何解决这个问题？

感谢。

编辑 - 一两张照片可能有所帮助。

Answer 1

您可能没有在圆圈上设置半径（必须在圆形元素上明确设置，并且不能通过CSS设置，因为只有样式属性，如填充，描边等，可以是设置）。

正如您所看到的，一个svg圆圈通常在设置r的半径（25）时显示，而另一个不显示，并且其大小正确报告为0px x 0px 。 （工具提示报告大小，而不是位置）。这是我使用的SVG：

<svg>
    <circle cx="100" cy="100" fill="#ffdf00" 
         stroke="#222222" stroke-width="2px" />
    <circle cx="50" cy="50" fill="#ffdf00" r="25" 
         stroke="#222222" stroke-width="2px" />
</svg>

此图片显示了两个圈子中的第二个，使用Chrome网络工具中的检查器，它正确报告了大小：

同样，在Chrome中使用检查器，突出显示了第一个没有设置半径的SVG元素：

它将大小显示为0px x 0px，并将圆圈显示为位于SVG文档左上角的圆圈。

http://jsfiddle.net/wiredprairie/gNrZ3/