javascript - 单击其他元素添加 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/