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

Question

假设我有一些看起来像这样的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”，“。”等等，但似乎没有任何效果。

Answer 1

您可以通过以下方式将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")