为什么我的 SVG:circle 在我将它附加到另一个 class 时没有显示?

Why doesn't my SVG:circle show up when I append it to a different class?

这里我有一个 JSFiddle:

'http://jsfiddle.net/reko91/66m1q9g2/'

我做了一个画圈的功能。现在在这个函数中,我必须 select 一个区域来附加我的圈子:

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 时,它不起作用。

我犯了什么愚蠢的错误?

SVG <rect> 元素不是 container 并且不能是另一个 <rect><circle> 元素的父元素。使第二个圆圈成为第一个圆圈的兄弟。