我正在尝试创建一个定义列表,例如:
<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>
元素,因为它似乎是在语义上代表键的最合适方式:值对:
答案 0 :(得分:7)
我在同一个问题上挣扎了一段时间。我发现 insert()的行为与 enter()选择有关。这基于输入选择与插入或附加元素合并到更新选择中的交互,插入与输入选择一起使用的方式。文档中的相关位:
selection.enter()
...输入选择会在您合并到更新选择中 追加或插入。
selection.insert()
...对于输入选择,可以省略前选择器,其中 case 输入元素将在下一个之前插入 跟随更新选择中的兄弟,如果有的话。这允许你 按照与绑定数据一致的顺序将元素插入DOM。
结果是,如果您在输入选择中插入一些 dt 元素,它们将合并到更新选择中。然后,如果您在输入选择中插入一些 dd 元素,它们将在之前立即插入在更新选择中的下一个兄弟之后<#34 ;;也就是说,他们在关联的 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] });
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
&#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,可以使用selections(more about implementation)。
顺便说一句,使用数组可能比json对象更容易表示列表