如何使用 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)
这是我在给定任意数组的情况下绘制多个 svg 的尝试，以便为每个元素绘制一个 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此处(右键单击“ View ”并检查以查看“元素”选项卡)
注意:我在数组中正在解决的一个更大的问题是文件名数组，我想使用每个文件中的数据将图形放入每个 svg 中以提供图形
<小时/>编辑1
非常感谢下面@Cyril 的回答:
供我引用。
最佳答案
你的 body 已经有 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 附加到正文:
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
现在当你的 body 有 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
现在当你的 body 有 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
关于javascript - 如何使用 d3 将多个 svgs 附加到正文，每个 svgs 都有一个 id？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37824318/