在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>元素。