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

时间:2014-06-09 08:24:04

标签: html5 d3.js key-value

我正在尝试创建一个定义列表,例如:

<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>元素,因为它似乎是在语义上代表键的最合适方式:值对:

3 个答案:

答案 0 :(得分:7)

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

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

  

selection.enter()

     

...输入选择会在您合并到更新选择中   追加或插入。

  

selection.insert()

     

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

结果是,如果您在输入选择中插入一些 dt 元素,它们将合并到更新选择中。然后,如果您在输入选择中插入一些 dd 元素,它们将在之前立即插入在更新选择中的下一个兄弟之后<#34 ;;也就是说,他们在关联的 dt 之后是正确的。

&#13;
&#13;
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] });
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

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

作为一个列表,所有内容都更容易--D3&#39; 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/

答案 2 :(得分:-1)

以下是我要做的事情:

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,可以使用selectionsmore about implementation)。

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