Javascript d3.js：如何遍历备份DOM

我不太清楚javascript、DOM或d3.js的哪个方面暴露了我的知识不足：只是知道我很抱歉问了下面这样一个基本的问题。我是新来的

我有这样一个json：

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

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

我想做一些看起来像

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

---

（虽然这还没有经过测试！javascript人员如何测试少量代码？）。这（可能）会给我

a
b
c

---

但是现在我无法摆脱

标签！我不知道在列表项标记结束之前，我需要做什么来添加额外的信息。我需要做什么？

简单：不要过度使用方法链接。：）

现在，您可以在li中添加其他内容。在这种情况下，由于D3只允许添加元素（而不是原始文本节点），因此您可能希望为插入式文本添加一个范围：

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

---

“javascript人员如何测试少量代码？”-恐怕我不知道d3语法，但您能不能先在'li'元素中输出d.count，然后再输入'a'？从而避免了向上遍历的需要？@dougajmcdonald这不会把d.count放在链接的前面而不是后面吗？@James Allardice谢谢！非常感谢！出于某种原因，我并不十分确定我正在不惜一切代价避免变量。我会停止那样做的。

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

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