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

现在你可以为李添加其他东西了。在这种情况下，由于D3只允许您添加元素（而不是原始文本节点），因此您可能希望为括号文本添加范围：

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

d3.js：如何遍历DOM

1 个答案: