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 做更多事情，这只是解决了我遇到的问题）。

在我的 html 中弹出 <ul> 标记后，在来自 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; });

现在您可以向 li 添加其他内容。在这种情况下，由于 D3 只允许您添加元素（而不是原始文本节点），您可能希望为括号文本添加一个跨度：

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