使用d3.js在几个div上创建一个SVG

5 html javascript svg d3.js

假设我有一些看起来像这样的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)