在点击其他元素时添加SVG元素

我在d3中创建了一些圈子。点击这些圈子时，我需要添加更多圈子，并使现有的圈子消失（不应再删除它们，因为我将再次使用它们）。在点击其他元素时添加SVG元素

我现在这样做的方式是通过一个监听器来监听原始圆圈上的单击事件。（这些与.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的左上角），为什么会发生这种情况？我如何解决这个问题？

谢谢。

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

what I see under inspect element

what I see in the browser

来源

2013-04-07 praks5432

这可能是因为你没有半径的圆设置（必须明确地圆元素上进行设置，并且无法通过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网络工具使用检查，它正确地报告尺寸：

52px x 52px

同样，在Chrome中使用检查强调了在没有半径设定第一SVG元素：

0px x 0px

它SH允许大小为0px x 0px，并将该圆圈显示为在SVG文档的左上角。

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

来源

2013-04-07 15:16:08 WiredPrairie

您应该报告的错误在任何UA你使用。不应该呈现没有r属性的圆圈，Firefox和Opera只显示一个圆圈。 – 2013-04-07 15:22:29

@RobertLongson它实际上是两个屏幕截图，而不是一个错误。我现在给他们贴上标签，希望他们更清楚。 – WiredPrairie 2013-04-07 15:50:56

@Progro - 好点。我的HTML帽子（边框半径:)）。我修正了答案，不建议半径可以通过诸如'subNode'这样的类来设置。 – WiredPrairie 2013-04-07 20:52:56

在点击其他元素时添加SVG元素

回答

相关问题