为什么我的SVG：circle出现在我将其附加到其他课程时？

Question

这里我有一个JSFiddle：

＆＃39; http://jsfiddle.net/reko91/66m1q9g2/＆＃39;

我做了一个圆圈的功能。现在在这个函数中我必须选择一个要附加我的圆圈的区域：

var circle = d3.select("#" + area)
    .append("svg:circle");

现在画两个圆圈：

createCircle("svg", 100,100,50,"red"); // here i select the SVG - it works 
createCircle("canvas", 200,200,50,"green"); // here i select the canvas - doesnt work

当我将圆圈附加到我创建的SVG时，它可以正常工作，但是当我将其附加到我制作的canvas时。

我犯了什么愚蠢的错误？

Answer 1

SVG <rect>元素不是container，不能是其他<rect>或<circle>元素的父元素。使第二个圆圈成为第一个圆圈的兄弟。