Question

我不明白如何在节点上显示文字我试了好几次但没有工作，请帮我解决一下

我根本不熟悉D3.js，但我需要为项目可视化图形，我需要节点上的这个附加功能（显示标签）

这是输入文件：

{
"nodes":[
{"name":"A","group":0},
{"name":"B","group":1},
{"name":"C","group":2},
{"name":"D","group":3},
{"name":"E","group":4}

],
"links":[
{"source":0,"target":1,"value":11},
{"source":0,"target":2,"value":11},
{"source":1,"target":2,"value":21},
{"source":1,"target":3,"value":21},
{"source":1,"target":4,"value":21},
{"source":2,"target":3,"value":21},
{"source":2,"target":4,"value":21},
{"source":3,"target":4,"value":11}
]
}

D3.js代码：

<script type="text/javascript">
    // use print_graph() method to output graph vertices
    main_graph();

    var width = 700,
        height = 300;


    var color = d3.scale.category20();

    var force = d3.layout.force()
        .charge(-120)

        .linkDistance(150)
        .size([width, height]);

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

    d3.json("input.json", function(error, graph) {
        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 Math.sqrt(d.value);
            });

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



        //I'm stuck here
        var texts = svg.selectAll("text.label")
            .data(graph.nodes)
            .enter().append("text")
            .attr("class", "label")
            .attr("fill", "white")
            .text(function(d) {
                return d.name;
            });

        /*
             // 1st trying
             var text = svg.selectAll("text")
                     .data(graph.node)
                     .enter().append("text")
                     .attr("fill","white")
                      .text(function (d) {return d.name; });
        */

        // another trying
        //node.append("text")
        //.text(function(d) { return d.name; });


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

Answer 1

如何添加text很好但是在force.on("tick", function() {})处理程序中你没有定位它们：

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;
    });
    texts.attr("x", function(d) { //<-- NEED TO POSITION THESE TOO
      return d.x;
    })
    .attr("y", function(d) {
      return d.y;
    });
 });

这是您的代码fixed。

在节点上显示文本/标签，D3.js强制有向图

1 个答案: