Question

如何使用d3将每个带有id的svgs附加到正文？

<body>
        <svg id="1" width="200" height="200"></svg>
        <svg id="2" width="200" height="200"></svg>
        <svg id="3" width="200" height="200"></svg>
        <svg id="4" width="200" height="200"></svg>
        <svg id="5" width="200" height="200"></svg>
</body>

这是我第一次尝试绘制1 svg：

// draw 1 svg 

d3.select("body").append("svg")
                 .attr("width",201)
                 .attr("height",202)
                 .attr("id",202)

这是我尝试绘制多个svgs，给定一个任意数组来绘制每个元素的svg。

// my attempt to draw multiple svg - not working

var arr =[10,20,30,40,50]

d3.select("body").selectAll("svg")
                 .data(arr)
                 .enter()
                 .append("svg")
                 .attr("width",201)
                 .attr("height",202)
                 .attr("id",function(d){ return d;})

在此处查看我的Fiddle（右键单击视图并检查以查看Elelemnts标签）

注意：我在数组中工作的一个更大的问题是文件名数组，我想在每个svg中使用每个文件中的数据为图表提供图表

EDIT1

非常感谢@Cyril的回答：

我的参考。

case1

case2

case3

Answer 1

你的身体已经有4个svgs。

你在做什么

<body>
        <svg id="1" width="200" height="200"></svg>
        <svg id="2" width="200" height="200"></svg>
        <svg id="3" width="200" height="200"></svg>
        <svg id="4" width="200" height="200"></svg>
        <svg id="5" width="200" height="200"></svg>
</body>

应该是：

<body>

</body>

现在在这种情况下，以下函数会将svg附加到body：

var arr =[10,20,30,40,50]

d3.select("body").selectAll("svg")
                 .data(arr)
                 .enter()
                 .append("svg")
                 .attr("width",201)
                 .attr("height",202)
                 .attr("id",function(d){ return d;})

想象一下你的html就像这样

案例1

<body>

</body>

现在你做的时候：

d3.select("body").selectAll("svg")//this will return an empty selection as there is no svg.

d3.select("body").selectAll("svg")
                 .data(arr)
// This will associate the data to the selection.

d3.select("body").selectAll("svg")
                 .data(arr)
                 .enter()
                 .append("svg")
//this will append 5 new svg to the body as the data arr has 5 elements BUT the selection has no svg.

案例2

现在你的身体有5个svg元素：

<body>
        <svg id="1" width="200" height="200"></svg>
        <svg id="2" width="200" height="200"></svg>
        <svg id="3" width="200" height="200"></svg>
        <svg id="4" width="200" height="200"></svg>
        <svg id="5" width="200" height="200"></svg>
</body>

d3.select("body").selectAll("svg")//this will return 5 svg selection.

d3.select("body").selectAll("svg")
                 .data(arr)
// This will associate the data to the selection.

d3.select("body").selectAll("svg")
                 .data(arr)
                 .enter()
                 .append("svg")
//the data arr has 5 elements and the selection has 5 elements so no svg will be appended.

案例3

现在你的身体有3个svg元素：

<body>
        <svg id="1" width="200" height="200"></svg>
        <svg id="2" width="200" height="200"></svg>
        <svg id="3" width="200" height="200"></svg>
</body>

d3.select("body").selectAll("svg")//this will return 3 svg selection.

d3.select("body").selectAll("svg")
                 .data(arr)
// This will associate the data to the selection.

d3.select("body").selectAll("svg")
                 .data(arr)
                 .enter()
                 .append("svg")
//this will append 2 svg to the body now the data arr has 5 elements and the selection has 3 elements so 2 svg will be appended.

它看起来像这样：

<body>
        <svg id="1" width="200" height="200"></svg>
        <svg id="2" width="200" height="200"></svg>
        <svg id="3" width="200" height="200"></svg>
        <svg id="40" width="200" height="200"></svg>
        <svg id="50" width="200" height="200"></svg>
</body>

希望这能清除你所有的疑虑。

工作代码here

如何使用d3将每个带有id的svgs附加到身体？

EDIT1

1 个答案: