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 中弹出

标记后，在 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>

，但现在我无法摆脱 标签！我无法弄清楚 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 + ")"; });