在D3.js的動態強制佈局圖中顯示節點標籤

Question

我試圖通過Web套接字使用D3.js將圖形可視化。我試圖顯示節點標籤（可以在下面的代碼中看到），但它似乎並沒有出現。請參閱函數start（）。這裏有什麼問題？

<script> 

    var width = 1900, 
    height = 1080; 

    var color = d3.scale.category10(); 

    var nodes = [], 
    links = []; 

    var force = d3.layout.force() 
    .nodes(nodes) 
    .links(links) 
    .charge(-100) 
    .gravity(0.1) 
    .linkDistance(100) 
    .size([width, height]) 
    .on("tick", tick); 

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


    var node = svg.selectAll(".node"), 
    link = svg.selectAll(".link"); 


    function tick() { 

    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 

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

    // Add and remove elements on the graph object 
    function addNode(id) { 
     nodes.push({"name":id, "id":id}); 
     start(); 
    } 

    function addEdge(edgeId,sourceId,targetId) { 

    var sourceNode = findNode(sourceId); 
     var targetNode = findNode(targetId); 

     if((sourceNode !== undefined) && (targetNode !== undefined)) { 
      links.push({"edgeId":edgeId, "source": sourceNode, "target": targetNode}); 
      start(); 
     } 
    } 

    function removeEdge(edgeId) { 
     for (var i = 0; i < links.length; i++) { 
       if (links[i].edgeId == edgeId) { 
        links.splice(i, 1); 
        break; 
       } 
     } 
     start(); 
     } 

     var findNode = function (id) { 
     for (var i=0; i < nodes.length; i++) { 
      if (nodes[i].id === id) 
       return nodes[i] 
     }; 
    } 
    function start() { 

    var drag = force.drag().origin(function(d) { return d; }).on("dragstart", dragstarted).on("drag", dragged).on("dragend", dragended); 
    link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; }); 
    link.enter().insert("line", ".node").attr("class", "link"); 
    link.exit().remove(); 


    node = node.data(force.nodes(), function(d) { return d.id;}); 
    node.enter().append("circle").attr("class", "node") 
     .attr("r", 5) 
     .style("fill", function(d) { return color(d.group); }) 
     .call(drag); 

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

    force.start(); 
    } 

    function dragstarted(d) { 
    d3.event.sourceEvent.stopPropagation(); 
    d3.select(this).classed("dragging", true); 
    } 

    function dragged(d) { 
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y =  d3.event.y); 
} 

    function dragended(d) { 
    d3.select(this).classed("dragging", false); 
} 
var socket = new WebSocket('ws://localhost:8887'); 
socket.onopen = function(){ 
    console.log("Connection established, handle with function"); 
}; 

socket.onmessage = function(evt){ 

    var obj = JSON.parse(evt.data); 

    if(obj.operation == "nodeAdded") 
    { 
     addNode(obj.nodeId); 
    } 
    if(obj.operation == "edgeAdded") 
    { 
     addEdge(obj.edgeId,obj.fromNodeId,obj.toNodeId); 
    } 

    if(obj.operation == "edgeRemoved") 
    { 
    removeEdge(obj.edgeId); 
    } 
} 
</script> 

Answer 1

您必須將每個節點的圓圈和相應的標籤分組。試試這種方式。

node = node.data(force.nodes(), function(d) { return d.id;}) 
    .enter().append("g") 
    .attr("class", "node") 
    .call(drag); 

node.append("circle") 
    .attr("r", 5) 
    .style("fill", function(d) { return color(d.group); }); 

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

還更新滴答功能，如下所示。

function tick() { 
    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 + ")"; }); 
} 

Answer 2

默認情況下文本元素是白色的。添加.style("fill", "black")，所以你可以看到它們。

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

而且你的節點是<circle>元素。您不能將<text>元素附加到<circle>元素（它不是容器）。使用<g>元素並將<circle>和<text>附加到它或將<text>元素附加到<svg>元素。