如何使用d3.js创建定义列表？ [英] How do I create a definition list with d3.js?

问题描述

我正在尝试创建一个定义列表，例如：

 < 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
} 
  

。
Whch是使用 d3.js 最优雅的方式吗？

PS：我想使用< dl> 元素，因为它似乎是语义表示键：值对：

• http://html5doctor.com/the-dl-element/


• 名称 - 值对的语义和结构

解决方案

我为同一问题奋斗了一段时间。我发现 insert（）与 enter（）选择的行为的技巧。这是基于插入或附加元素合并到更新选择中的输入选择之间的交互，插入使用输入选择的方式。文档中的相关位：

selection.enter（）

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

selection.insert（）

…对于输入选择，可以省略before选择器，其中
case 输入元素将紧接在更新选择中的兄弟之后的下一个
之前插入（如果有的话）。这允许你
以符合绑定数据的顺序将元素插入到DOM中。

结果是，如果你在输入选择中插入一些 dt 元素，它们将被合并到更新选择中。然后，如果您随后在输入选择中插入一些 dd 元素，则会在更新选择中的下一个同级之前之前立即插入;

-lang =jsdata-hide =false>

  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 ;  

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

I am trying to create a definition list such as this one:

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

by using a JSON in this form:

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

. Whch is the most elegant way to do it with d3.js?

PS: I would like to use the <dl> element because it seems the most appropriate way to semantically represent a key:value pair:

• http://html5doctor.com/the-dl-element/
• Semantics and Structure of Name-Value Pairs

解决方案

I struggled with the same issue for a while. What I found was the behavior of insert() with the enter() selection does the trick. This is based on the interaction between the enter selection whose inserted or appended elements are merged into the update selection, the the way that insert works with enter selections. The relevant bits in the documentation:

selection.enter()

… The enter selection merges into the update selection when you append or insert.

selection.insert()

… For enter selections, the before selector may be omitted, in which case entering elements will be inserted immediately before the next following sibling in the update selection, if any. This allows you to insert elements into the DOM in an order consistent with bound data.

The result is that if you insert some dt elements into the enter selection, they will be merged into the update selection. Then, if you then insert some dd elements into the enter selection, they will be "inserted immediately before the next following sibling in the update selection"; that is, they'll be right after their associated 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>

这篇关于如何使用d3.js创建定义列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！