1

我在 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 处）。为什么会这样？我该如何解决？

谢谢。

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

我在检查元素下看到的

我在浏览器中看到的

4

1 回答 1

2

很可能您没有在圆上设置半径（必须在圆元素上显式设置，并且不能通过 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 网络工具中的检查器，它正确报告了大小：

52 像素 x 52 像素

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

0 像素 x 0 像素

它显示大小0px x 0px并显示圆圈，就好像它位于 SVG 文档的左上角一样。

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

于 2013-04-07T15:16:08.207 回答