Question

例如，如果我有这个

  <div>
    <g class="one"></g>
    <g class="two"></g>
    <g class="three"></g>
    <g class="four"></g>
    <g class="five"></g>
  </div>

如果我要在类g和new的两个g之间插入另一个类three的{{1}}。

产生

two

这些作品：

  <div>
    <g class="one"></g>
    <g class="two"></g>
    <g class="new"></g>
    <g class="three"></g>
    <g class="four"></g>
    <g class="five"></g>
  </div>

但是如果我有这个并且想在行所在的位置插入一个d3.select("div").insert("g", ".three").attr("class", "new"); d3.select("div").insert("g", ":nth-child(3)").attr("class", "new");类的g，它将无法正常工作。（我已经使用了一些行，因为我不确定我是否会正确解释）

new

是否可以通过仅计算<div> <g class="one"> <g class="two"> <circle></circle> </g> <g class="one"> <circle></circle> </g> <g class="one"> <circle></circle> </g> </g> <g class="one"></g> ------------------(this is where i want <g class="new"></g>)-------- <g class="two"></g> <g class="one"></g> <g class="one"></g> </div>下级别的g的数目来插入它。例如在第二个和第三个div标签之间。

我尝试过类似的事情：

g

我想出了一种解决方法：

d3.select("div").insert("g", "div > g, g:nth-of-type(3)").attr("class", "new");

但这似乎效率很低。

Answer 1

以下应为您工作：

d3.select("div").insert("g", ".three").attr("class", "new");

这里是working fiddle。

如果要在第n个元素之后而不是在特定类之后插入，可以执行以下操作：

d3.select("div").insert("g", ":nth-child(3)").attr("class", "new");

如果您需要更大的灵活性（也许在该div中除g之外还有其他元素），可以像下面这样在第n个g之前插入：

d3.select("div").insert("g", "g:nth-of-type(3)").attr("class", "new");

编辑：

仍然不清楚您要完成什么，但这是我最后一次尝试：

d3.select("div").insert("g", "div > g:nth-of-type(3)").attr("class", "new").append("text").text("new ");

Codepen

这将在作为g的直接子元素的第三个g元素之前插入新的div。它与类无关，我不知道您为什么首先提到类，特别是如果您知道它们不是唯一的，但是您的示例使它看起来像是这样的话。

您应该阅读this。

d3.js：在特定位置插入g元素

1 个答案: