如何使用 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/
• Semantics and Structure of Name-Value Pairs

Answer 1

d3 v3.x 的解决方案；从 d3 4.0 起不再工作

我为同样的问题苦苦挣扎了一段时间。我发现 insert() 与 enter() 选择的行为可以解决问题。这是基于插入或附加元素合并到更新选择中的输入选择之间的交互，插入与输入选择一起使用的方式。文档中的相关位：

selection.enter()

…当你进入更新选择时，输入选择合并到更新选择中 追加或插入。

selection.insert()

... 对于 enter 选择，可以省略 before 选择器，其中 case 输入元素将在下一个之前插入 更新选择中的以下兄弟，如果有的话。这使您可以 按照与绑定数据一致的顺序将元素插入 DOM。

结果是，如果你在 enter 选择中插入一些 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>

Answer 2

当内容像您描述的那样简单时，最简单的方法 可能只是直接创建成对的 HTML 元素和 之后将数据绑定到它们。

此外，作为列表，一切都更容易——D3 的entries function 可以 轻松地将您的对象吹到对象列表中：

var pairs = {
  "term1":"definition1",
  "term2":"definition2",
  "term3":"definition3"
};
var pairlist = d3.entries(pairs);  // [{"key":"term1", "value":"definition1"}, etc... ]

var dl = d3.select("dl").html( new Array(pairlist.length + 1).join("<dt/><dd/>") );

dl.selectAll("dt").data(pairlist).html(function(d) { return d.key; });
dl.selectAll("dd").data(pairlist).html(function(d) { return d.value; });

JsFiddle：http://jsfiddle.net/slushy/bbh6a4w0/

Answer 3

我会这样做：

list = {
  "term1":"definition1",
  "term2":"definition2",
  "term3":"definition3"
}

dl = d3.select('body').append('dl')
for(var key in list) {
    dl.append('dt').text(key)
    dl.append('dd').text(list[key])
}

JsFiddle：http://jsfiddle.net/chrisJamesC/RZdQw/

然后，如果您想更具体地了解 d3，可以使用 selections (more about implementation)。

顺便说一句，使用数组表示列表可能比 json 对象更容易