javascript - 在 D3.js 中的动态 forcelayout 图中显示节点标签

Question

我正在尝试通过网络套接字使用 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 + ")"; });
}