如何在D3.js中为.enter()创建的.child元素前置同级元素

嘿，我来帮你搞定这个DOM结构调整的需求！要在每个.hierarchy容器里的.child元素前添加显示hierarchies.property.name文本的.property类div，你可以用D3的insert()方法或者在enter阶段按顺序创建元素，两种方式都能轻松实现。

方式一：针对已存在的DOM结构插入元素 #

如果你的.hierarchy和.child元素已经渲染到页面上了，直接选中所有.hierarchy容器，然后在.child前插入新元素就行：

// 选中所有.hierarchy容器，绑定对应的数据（如果没绑定过的话）
d3.selectAll('.hierarchy')
  .data(function(d) { return [d]; }) // 若.hierarchy已绑定hierarchy数据，这步可省略
  // 使用insert方法，第二个参数指定插入到.child元素之前
  .insert('div', '.child')
  .attr('class', 'property')
  .text(function(d) {
    // 这里d就是对应的hierarchy数据，直接取property.name即可
    return d.property.name;
  });

insert()方法的第二个参数是参考选择器，D3会自动把新元素插入到该选择器匹配的元素之前，完美满足你“在.child系列元素前添加同级元素”的需求。

方式二：在enter阶段按顺序创建元素（更推荐） #

如果你的DOM结构是通过D3的嵌套enter()生成的，那最好在创建.child元素之前就先添加.property元素，这样能确保DOM顺序一开始就是正确的，不用事后调整：

// 假设你原来的system -> hierarchy嵌套选择是这样的
const hierarchyEnter = d3.selectAll('.system')
  .selectAll('.hierarchy')
  .data(function(d) { return d.hierarchies; })
  .enter()
  .append('div')
  .attr('class', 'hierarchy');

// 先在hierarchy容器里添加.property元素
hierarchyEnter
  .append('div')
  .attr('class', 'property')
  .text(function(d) { return d.property.name; });

// 再创建.child元素（这样自然就在.property后面了）
hierarchyEnter
  .selectAll('.child')
  .data(function(d) { return d.children; })
  .enter()
  .append('div')
  .attr('class', 'child')
  // 这里添加child元素的文本或其他属性
  .text(function(childD) { return childD.name; });

这种方式更符合D3数据驱动的设计思路，从数据到DOM一步到位，避免了后续再操作已渲染的元素。

不管用哪种方式，都能让每个.hierarchy容器里先显示Sub-Alpha/Sub-Bravo这类文本的.propertydiv，再展示对应的.child元素~

内容的提问来源于stack exchange，提问作者sansSpoon