使用 d3.js 在多个 div 处创建 SVG

【问题标题】：Using d3.js to create an SVG at several divs使用 d3.js 在多个 div 处创建 SVG
【发布时间】：2013-12-07 02:35:29
【问题描述】：

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

【问题讨论】：

标签： javascript html svg d3.js

【解决方案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)

另外，如果您希望它们出现在您的

之前

元素，使用插入而不是附加：

d3.selectAll("div.a").insert("svg", "p")

【讨论】：

谢谢，这很好用。因为这个，我什至对选择器有一个“啊哈”的时刻——太棒了！
@elijah 这太棒了。非常感谢您花时间回答这个问题。它也帮助了我！