javascript - 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 是什么不敬虔的组合并选择 parent 或我需要做的其他事情以在列表项标签结束之前附加那条额外的信息。我需要做什么？

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