如何追加一个新的div元素，它是使用d3创建的第一个div的兄弟？(How to append a new div element that is sibling of first div creat

如何追加一个新的div元素，它是使用d3创建的第一个div的兄弟？(How to append a new div element that is sibling of first div created using d3?)

基本上，我想在其他div之后添加一个新的div： 不是一个子div，而是创建了第一个div的兄弟 。

使用下一个Code ，我在h4内得到一个div :(

let content = d3.select('#id_') let divs = content.selectAll('div') .data(data.keys) // It contains 8 objects, will return 8 divs. .enter() .append('div') .attr('class', 'mydiv') .append('h4') .text((d) => { return d.title }) .append('div') .attr('class', 'new-div')

我得到了我需要的div数量。 但是，类new-div新div元素在h4标记内。

我想按此顺序创建一些东西：

<!-- Divs created with d3 --> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div>

在添加h4标签后我也尝试使用.insert ：

... .append('h4') .text((d) => { return d.title }) .insert('div') .attr('class', 'new-div')

但结果是一样的。

我知道这个过程中的层次结构不仅重要，而且它根据每个步骤构建标签。 有没有办法创建一个新的div元素，这是第一个div创建的兄弟？

Basically, I want to append a new div after other div: not a children div, but a sibling of the first div created.

Using the next Code, I'm getting a div inside a h4 :(

let content = d3.select('#id_') let divs = content.selectAll('div') .data(data.keys) // It contains 8 objects, will return 8 divs. .enter() .append('div') .attr('class', 'mydiv') .append('h4') .text((d) => { return d.title }) .append('div') .attr('class', 'new-div')

I got the number of divs I need. However, new div element with class new-div is inside h4 tag.

I want to create something in this order:

<!-- Divs created with d3 --> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div>

I also tried using .insert after appending h4 tag:

... .append('h4') .text((d) => { return d.title }) .insert('div') .attr('class', 'new-div')

But result is the same.

I know hierarchy in this process is not only important, but it builds tags according to each step. Is there a way to create a new div element that is sibling of first div created?

最满意答案

只是为了让您知道， 接受的答案 （在撰写本文时）创建了这种结构：

<div class='mydiv'> <h4>Title</h4> </div> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div> <div class='new-div'></div>

正如你所看到的，所有带有"new-div"类"new-div"都将出现在.mydiv div之后。 我有一种强烈的感觉，这不是你想要的。

如果你想一个接一个地创建它们，你有不同的选择，比如这个（繁琐） each() ：

var content = d3.select("body");
var data = [{
  title: "foo"
}, {
  title: "bar"
}];
var divs = content.selectAll(null)
  .data(data)
  .enter();

divs.each(function(d) {
  content.append("div")
    .attr('class', 'mydiv')
    .append('h4')
    .text(() => {
      return d.title
    });
  content.append('div')
    .attr("class", "new-div");
}) 
  
<script src="https://d3js.org/d3.v4.min.js"></script> 
  
 
 
 这将创建以下结构： 
 
<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='new-div'></div>
<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='new-div'></div>
Just to let you know, the accepted answer (at the time of writing) creates this structure:
 
<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='new-div'></div>
<div class='new-div'></div>
 
As you can see, all the divs with the class "new-div" will come after the .mydiv divs. I have a strong feeling that this is not what you want. 
 
If you want to create them one after the other, you have different options, like this (cumbersome) each():
 
 
 
  
  
var content = d3.select("body");
var data = [{
  title: "foo"
}, {
  title: "bar"
}];
var divs = content.selectAll(null)
  .data(data)
  .enter();

divs.each(function(d) {
  content.append("div")
    .attr('class', 'mydiv')
    .append('h4')
    .text(() => {
      return d.title
    });
  content.append('div')
    .attr("class", "new-div");
}) 
  
<script src="https://d3js.org/d3.v4.min.js"></script> 
  
 
 
This will create the following structure:
 
<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='new-div'></div>
<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='new-div'></div>