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

Question

我想使用 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')

但即使在追加之后我也想保持原来的选择，所以我可以继续追加到父元素。谢谢！

Answer 1

的惯用方式是嵌套：

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 仅在特定选择的上下文中定义，当我们重新选择时会丢失。

Answer 2

而不是.append()，

您还可以在 .html() 中包装创建新内容的函数

d3.select('#parent')
  .selectAll('div')
    .data(data)
  .enter()
    .append('div')
    .html(function(d) {return "<p>" + from data[0] + "<p>" etc..... ;});

Answer 3

第一项使用append()，第二项使用insert()。这消除了事后排序的任何需要（感谢@scuerda 指出这一点的评论）（JSFiddle）：

data = [{}, {}, {}];
var enterSelection = d3.select('#parent').selectAll('p').data(data).enter()

enterSelection.append('p').text(function(d, i) {return 'from data[' + i + ']'})
enterSelection.insert('p').text(function(d, i) {return 'from data[' + i + ']'})

这将为您提供所需的确切结构：

<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>

Answer 4

您也可以在单个选择/输入循环中执行此操作，如下所示

d3.select('#parent').selectAll('p').data(data).enter().
append('p').text(function(d) {return 'from data[0]')}).
select(function() { return this.parentNode; }).
append('p').text(function(d) {return 'from data[0]')});

Answer 5

与上述类似，但成语不同。这更适用于嵌套选择方法，并且无需排序或插入：

var divs = d3.select('#parent');

var ps = divs.selectAll('#parent > div')
    .data(d3.range(3)).enter().append('div');

ps.append('p').html(function(d,i) { return 'from data[' + i + ']'; });
ps.append('p').html(function(d,i) { return 'from data[' + i + ']'; });

更优雅（可能更快）：

var divs = d3.select('#parent');

  var ps = divs.selectAll('#parent > div')
    .data(d3.range(3)).enter().append('div');

    ps.append('p').html(function(d,i) { return 'from data[' + i + ']'; })
    .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); });

Answer 6

1。复制每个元素

创建一个新列表，其中包含所有元素两次 (like this)：

doubleData = data.reduce(function (res, current, index, array) {
    return res.concat([current, current]);
}, []);

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

2。输入两次

有时您想对附加的元素进行进一步的操作。在这种情况下，您可能想知道您是在访问第一个还是第二个添加的元素。为这些元素添加 first-paragraph 和 second-paragraph 类。

d3.select('#parent').selectAll('.first-paragraph')
  .data(data)
  .enter()
  .append('p')
  .attr('class', 'first-paragraph');

d3.select('#parent').selectAll('.second-paragraph')
  .data(data)
  .enter()
  .append('p')
  .attr('class', 'second-paragraph');

在这种情况下，您可能需要根据 Adam Pearce's answer 对元素进行排序。