如何使用d3.js创建定义列表？

Question

我正在尝试创建一个这样的定义列表:

<dl>
   <dt>term1</dt>
   <dd>definition1</dd>
   <dt>term2</dt>
   <dd>definition2</dd>
   <dt>term3</dt>
   <dd>definition3</dd>
</dl>

通过使用此表单中的JSON:

{
  "term1":"definition1"
  "term1":"definition2"
  "term3":"definition3"
}

.用d3.js做最优雅的方式是什么？

PS:我想使用该<dl>元素,因为它似乎是在语义上表示键的最合适的方式:值对:

• http://html5doctor.com/the-dl-element/
• 名值对的语义和结构

Answer 1

d3 v3.x的解决方案; 不再适用于d3 4.0

我有一段时间在同一个问题上挣扎.我发现insert()的行为 与enter()选择有关.这基于输入选择与插入或附加元素合并到更新选择中的交互,插入与输入选择一起使用的方式.文档中的相关位:

selection.enter()

...当您追加或插入时,回车选择会合并到更新选择中.

selection.insert()

...对于输入选择,可以省略前选择器,在这种情况下,输入元素将在更新选择中的下一个兄弟之前插入,如果有的话.这允许您按照与绑定数据一致的顺序将元素插入DOM.

结果是,如果在输入选择中插入一些dt元素,它们将合并到更新选择中.然后,如果然后在输入选择中插入一些dd元素,它们将" 在更新选择中的下一个兄弟之前立即插入"; 也就是说,他们将在他们相关的dt之后.

var data = { a: 1, b: 2, c: 3 };
var dl = d3.select("body").append("dl").selectAll().data(Object.keys(data));
dl.enter().insert("dt").text(function(key) { return key });
dl.enter().insert("dd").text(function(key) { return data[key] });

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