向d3js中的節點添加箭頭和文本強制佈局

Question

我一直在嘗試將文本和箭頭添加到d3js強制佈局圖中，但無法獲得所需的結果。

我的腳本如下所示：

var width = 600; 
height = 400; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(100) 
    .size([width, height]); 

var svg = d3.select("#t").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("topology.json", function(error, graph) { 
    if (error) throw error; 

    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll(".link") 
     .data(graph.links) 
     .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return 2*(d.value); });//Math.sqrt 

    var node = svg.selectAll(".node") 
     .data(graph.nodes) 
     .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", 10) 
     .style("fill", function(d) { return color(d.group); }) 
     .call(force.drag); 
    node.append("title") 
     .text(function(d) { return d.name; }); 

    force.on("tick", function() { 
    link.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 
    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
    }); 
}); 

我嘗試添加下面的代碼片段添加文本

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

樣品JSON數據是

{ 
    "nodes": [{ 
     "name": "0", 
     "group": 2 
    }, { 
     "name": "1", 
     "group": 2 
    }, { 
     "name": "2", 
     "group": 2 
    }, { 
     "name": "3", 
     "group": 1 
    }], 
    "links": [{ 
     "source": 0, 
     "target": 1, 
     "value": 1 
    }, { 
     "source": 1, 
     "target": 3, 
     "value": 2 
    }, { 
     "source": 2, 
     "target": 3, 
     "value": 1 
    }] 
} 

任何幫助，向圈子和箭頭添加文字會很棒。對不起，如果我聽到一個小白。

謝謝:) :)

Answer 1

Mobashyr，我已經使用了下面的樣品符合我的要求：

// Restart the force layout. 
    var force.nodes(nodes) 
     .links(links) 
     .charge(-1000) 
     .linkDistance(120) 
     .alpha(-15) 
     .start(); 

    var link = vis.selectAll(".link") 
     .data(links); 

    link.enter().insert("svg:line", ".node") 
     .attr("class", "link") 
     .style("stroke", "#ccc") 
     .attr("cursor", "pointer") 
     .style("stroke-width", "0") 
     .style("stroke-width", function(d) { return d.weight;}) 
     .on("mouseover", function() { d3.select(this).style("stroke", "#555555").attr("stroke-opacity", "1.0").attr("stroke-width","10");}) 
     .on("mouseout", function() { d3.select(this).style("stroke", "#ccc").attr("stroke-opacity", "1.0").attr("stroke-width","4") }); 

    link.exit().remove(); 

    var node = vis.selectAll("g.node") 
     .data(nodes) 

    var groups = node.enter().append("g") 
     .attr("class", "node") 
     .attr("id", function (d) { 
      return d.entityType; 
     }) 
     .on('click', click) 

    groups.append("circle") 
     .attr("cursor", "pointer") 
     .style("fill", function(d) { return color(d.entityType); }) 
     .style("fill", "#fff") 
     .style("stroke-width", "0") 
     .style("stroke", "#ddd") 
    .attr("r", 20); 

groups.append("text") 
     .attr("dy", 18) 
     .style("font-size", "2.5px") 
     .style("text-anchor", "middle") 
     .style('fill','#000') 
     .attr("refX", 15) 
     .attr("refY", -1.5) 
     .text(function (d) { 
      return d.text; 
     }); 

node.exit().remove(); 

force.on("tick", function() { 
     link.attr("x1", function (d) { 
      return d.source.x; 
     }) 
      .attr("y1", function (d) { 
      return d.source.y; 
     }) 
      .attr("x2", function (d) { 
      return d.target.x; 
     }) 
      .attr("y2", function (d) { 
      return d.target.y; 
     }); 

     node.attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
     });