使用 D3.js 为每个数据成员附加多个非嵌套元素

我想使用 d3 创建多个非嵌套元素来创建如下结构：

    <div id="parent">
        <p> from data[0] </p>
        <p> from data[0] </p>

        <p> from data[1] </p>
        <p> from data[1] </p>

        <p> from data[2] </p>
        <p> from data[2] </p>
    </div>

创建嵌套结构会是这样的

    d3.select('#parent').selectAll('p').data(data).enter().
           append('p')...append('p')

但我想即使在追加之后也保留原始选择，这样我就可以继续追加到父元素。谢谢你！

惯用的做法is与嵌套：

var divs = d3.select('#parent').selectAll('p').data(data).enter().append('div');

divs.append('p')
divs.append('p')

这会创建：

<div id="parent">
  <div>
    <p> from data[0] </p>
    <p> from data[0] </p>
  </div>

  <div>
    <p> from data[1] </p>
    <p> from data[1] </p>
  </div>

  <div>
    <p> from data[2] </p>
    <p> from data[2] </p>
  </div>
</div>

如果这不起作用，请保存您的选择并重复附加：

var enterSelection = d3.select('#parent').selectAll('p').data(data).enter();

enterSelection.append('p')
enterSelection.append('p')

然后对您添加的内容进行排序：

d3.select('#parent').selectAll('p').sort(function(a, b){ return a.index - b.index; })

您需要添加一个index的每个元素的属性data描述排序顺序。正常的i仅在特定选择的上下文中定义，当我们重新选择时会丢失。