我想使用 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')
但我想即使在追加之后也能保持原来的选择,所以我可以继续追加到父元素。谢谢!
最佳答案
惯常的做法是嵌套:
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
仅在特定选择的上下文中定义,当我们重新选择时它会丢失。
关于javascript - 使用 D3.js 为每个数据成员附加多个非嵌套元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21485981/