向d3.js中的節點添加標籤

Question

我是d3.js的新手

我試圖向我的節點添加標籤。 但無論我嘗試不工作.. 我的代碼是在這裏：

http://jsfiddle.net/Ymtg5/1/

它是一種混搭http://bl.ocks.org/christophermanning/4208494 和力之間有向圖。 基本上我正在閱讀一個json文件並創建上述圖形。 現在我想添加標籤節點酷似http://bl.ocks.org/mbostock/950642 我嘗試添加這些行

node.append("text") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name }); 

但它不工作。 任何幫助。建議.. 謝謝

Answer 1

最可能的問題是您的JSON類沒有「名稱」。

對，這不是問題

你的代碼的相關部分如下：

var node = svg.selectAll("path.node") 
    .data(nodes) 
    .enter().append("path").attr("class", "node") 
    .style("fill", function(d) { return fill(d.value); }) 
    .style("stroke", function(d) { return d3.rgb(fill(d.value)).darker(); }) 
    .call(force.drag); 

// HERE should go node manipulation to add the text 

force 
    .nodes(nodes) 
    .links(links) 
    .on("tick", tick) 
    .start(); 

function tick() { 

    //node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";); 
    node.attr("d", function(d) { return clip({"type":"F {"type":"Point","coordin...   
    link.attr("d", function(d) { return clip({"type":"Feature","geometry":{ ... 

我已插入註釋行，其中的節點的操作應該去，如果你想爲節點添加標籤。你在tick函數內部這樣做了（好吧，我認爲你正在嘗試在那裏做，代碼不在小提琴中），並且該函數應該僅用於操縱節點的屬性。創建文本並將其附加到節點的位置不在該函數中。