d3.js:如何遍历DOM

Question

我不太确定javascript,DOM或d3.js的哪个方面暴露了我缺乏的知识:只是知道我很遗憾地问这样一个基本问题如下.我是新来的.

我有一个这样的json:

[{"link":"a", "count": 3}, {"link":"b", "count": 4}, {"link":"c", "count": 2}]

我想做一些看起来像的东西

<ul>
    <li> <a>a</a> (3)</li>
    <li> <a>b</a> (4)</li>
    <li> <a>c</a> (2)</li>
</ul>

使用d3.js(解决显而易见的问题:我想用d3做更多的事情,这只是抓住了我遇到的问题).

<ul>在我的html中弹出一个标签后,在回调的某个地方,d3.json我可以这样写:

d3.select("ul")
    .selectAll("li")
    .data(json)
    .enter()
    .append("li")
    .append("a")
    .text(function(d){return d.link})

(虽然这是未经测试的!javascript人们如何测试一小段代码？).这将(可能)给我

<ul>
    <li><a>a</a></li>
    <li><a>b</a></li>
    <li><a>c</a></li>
</ul>

但现在我无法摆脱<a>标签!this在列表项标签结束之前,我无法弄清楚是什么不合理的组合和选择父母或我需要做些什么来处理额外的信息.我需要做什么？

Answer 1

简单:不要过分使用方法链接.:)

var ul = d3.select("ul");

var li = ul.selectAll("li")
    .data(json)
  .enter().append("li");

var a = li.append("a")
    .text(function(d) { return d.link; });

现在你可以添加其他东西给李.在这种情况下,由于D3只允许您添加元素(而不是原始文本节点),因此您可能希望为括号文本添加范围:

li.append("span")
    .text(function(d) { return " (" + d.count + ")"; });