假设我有一些看起来像这样的HTML:
<html>
<body>
<div class = "a"></div>
...
<div class = "a"></div>
...
<div class = "a"></div>
...
</body>
<html>
其中......只是段落或其他代码。
问题:我希望能够使用d3.js在每个div上附加一个SVG。
例如,假设我想制作一个矩形,如:
var svg = ((SOMETHING GOES HERE!))
.append("svg")
.attr("width", w)
.attr("height", h);
var sep = svg.selectAll("rect")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 10)
如何使用第一行的选择器来执行此操作?我已尝试selectall()
和select()
各种“div.a”,“。”等等,但似乎没有任何效果。
答案 0 :(得分:10)
您可以通过以下方式将SVG附加到您的div:
d3.selectAll("div.a").append("svg")
如果您想在选择后对这些SVG进行选择并采取行动,只需添加一个子选择:
d3.selectAll("div.a").select("svg").append("rect").attr("height", 50).attr("width", 50)
或者您可以对SVG进行分类并在制作完成后选择它们:
d3.selectAll("div.a").append("svg").attr("class", "divSVG")
d3.selectAll("svg.divSVG).append("rect").attr("height", 50).attr("width", 50)
此外,如果您希望它们出现在
元素之前,请使用insert而不是append:
d3.selectAll("div.a").insert("svg", "p")