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

发布时间：2020-12-14 23:08:45 所属栏目：资源来源：网络整理

导读：假设我有一些看起来像这样的HTML：其中只是段落或其他代码. 问题：我希望能够使用d3.js在每个div上附加一个SVG. 例如,假设我想制作一个矩形,如： var svg = ((SOMETHING GOES HERE!)) .append("svg") .attr("width",w) .attr("height",h);var sep = svg.sel

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


最佳答案
您可以通过以下方式将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)

此外,如果您希望它们出现在元素之前,请使用insert而不是append：

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


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!