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

回答

相關問題