d3.js：如何遍历备份DOM

我不太确定javascript，DOM或d3.js的哪些方面暴露了我缺乏的知识：只知道我很抱歉是问如下一个基本问题。我是新来的。d3.js：如何遍历备份DOM

我有这样一个JSON：

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

，我想做出一些看起来像使用d3.js

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

（解决显而易见的：我想要做的更多的D3，这只是捕捉我有一个问题）。

从d3.json在回调中在我的HTML弹出一个<ul>标签的地方后，我可以写这样的事：

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和选择父母的不合要求的组合，或者在列表项标签关闭之前我需要做些什么来处理这些额外的信息。我需要做什么？

来源

2011-10-06 Mike Dewar

“javascript的人怎么测试一小段代码？ “ - http://jsfiddle.net/ –

我不知道恐惧的d3语法，但是可以不在“a”之前简单地在'li'元素中输出d.count？从而避免需要向上移动？ – dougajmcdonald

@dougajmcdonald会不会把d.count的链接放在后面而不是后面呢？ –

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

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

来源

2011-10-06 20:05:21 mbostock

非常感谢！出于某种原因，我不是非常确定我试图避免变数，不惜一切代价。将停止这样做。 –

d3.js：如何遍历备份DOM

回答

相关问题