假设我有一些看起来像这样的HTML:
<html>
<body>
<div class = "a"></div>
...
<div class = "a"></div>
...
<div class = "a"></div>
...
</body>
<html>
Run Code Online (Sandbox Code Playgroud)
其中......只是段落或其他代码.
问题: 我希望能够使用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)
Run Code Online (Sandbox Code Playgroud)
如何在第一行使用选择器来执行此操作?我试着selectall()和select()各种"div.a",""等事情,但似乎没有任何工作.
Eli*_*jah 10
您可以通过以下方式将SVG附加到div:
d3.selectAll("div.a").append("svg")
Run Code Online (Sandbox Code Playgroud)
如果您想在选择后对这些SVG进行选择并对其进行操作,只需添加一个子选择:
d3.selectAll("div.a").select("svg").append("rect").attr("height", 50).attr("width", 50)
Run Code Online (Sandbox Code Playgroud)
或者您可以对SVG进行分类并在完成后选择它们:
d3.selectAll("div.a").append("svg").attr("class", "divSVG")
d3.selectAll("svg.divSVG).append("rect").attr("height", 50).attr("width", 50)
Run Code Online (Sandbox Code Playgroud)
此外,如果你想让它们出现在你的面前
元素,使用insert而不是append:
d3.selectAll("div.a").insert("svg", "p")
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
6953 次 |
| 最近记录: |