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

默认情况下，文本元素为白色。添加.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>元素。

Answer 2

您必须为每个节点分组圆圈和相应的标签。试试这种方式。

$.ajax()

同时更新刻度功能，如下所示。

def has_permission(self, request, view):
    username = view.kwargs.get('username', None)
    userProfile = get_object_or_404(User, username=username)
    return request.user.userextended.location == userProfile.userextended.location

在D3.js中的动态强制布局图中显示节点标签

2 个答案: