javascript - 如何附加一个新的 div 元素，该元素是使用 d3 创建的第一个 div 的同级元素？

Question

基本上，我想在其他 div 之后附加一个新的 div:不是子 div，而是创建的第一个 div 的同级。

使用下一个代码，我在 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 的同级元素？

Answer 1

您可以在附加第二个 div 之前使用 .select(function() { return this.parentElement.parentElement; })。在这种情况下，您不会断开链接并且您的选择会返回父元素，因此第二个附加的 div 将是第一个附加的 div 的兄弟元素。查看下面的演示:

var data = [{ title: 'foo', country: 1 }, { title: 'bar', country: 2 } ];

let divs = d3.select('body')
    .selectAll('div')
    .data(data)
    .enter()
    .append('div')
    .attr('class', 'mydiv')
    .append('h4')
    .text((d) => {
      return d.title
    })
    .select(function() { return this.parentElement.parentElement; })
    .append('div')
    .data(data)
    .attr('class', function(d) { return 'country-' + d.country; })
    .text(function(d) {return d.country });

.mydiv {
  width: 100px;
  height: 20px;
  border: 1px solid green;
  background-color: pink;
  display: inline-block;
}

.country-1, .country-2 {
  width: 100px;
  height: 20px;
  border: 1px solid green;
  background-color: aqua;
  display: inline-block;
}

h4 {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>