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

Question

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

5

假设我有一些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", ".", 等等，但都没有成功。

- user2487726

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elijah · Accepted Answer

你可以使用以下代码将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")