Question

有一个示例如何在D3强制图中的节点上标记。我尝试做的是在线上有一个标签。

节点上的标签示例：http://bl.ocks.org/mbostock/2706022

此代码将在左上角显示该行的文本。它似乎需要x，y来自画布，而不是来自我的线。如何解决这个问题？

var labelLine = olinks.append（“text”） .attr（“x”，12） .attr（“dy”，“。35em”）的.text（ “EEEEEE”）;

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .node {
    stroke: #fff;
    stroke-width: 1.5px;
}

.link {
    stroke: #999;
    stroke-opacity: .6;
}
</style>
<body>
<script src="./Script/d3.v3/d3.v3.min.js"></script>
<script>
    var graph = {
        "nodes": [
          { "name": "App1-main", "group": 1 },
          { "name": "App2", "group": 1 },
          { "name": "App3", "group": 1 },
          { "name": "App4", "group": 1 },
          { "name": "Content-1", "group": 3 },
          { "name": "Content-1", "group": 3 },
          { "name": "Content-1", "group": 3 },
          { "name": "Content-1", "group": 3 },
          { "name": "Pontmercy", "group": 3 }
        ],
        "links": [
          { "source": 1, "target": 0, "value": 1 },
          { "source": 2, "target": 0, "value": 1 },
          { "source": 0, "target": 3, "value": 1 }
        ]
    };
    var width = 960,
        height = 500;

    var color = d3.scale.category20();

    var force = d3.layout.force()
        .charge(-300)
        .linkDistance(60)
        .size([width, height]);

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

    var drawGraph = function (graph) {
        force
            .nodes(graph.nodes)
            .links(graph.links)
            .start();

        var olinks = svg.selectAll("g.link")
            .data(graph.links)
            .enter().append("g")
            .call(force.drag);

        var link = olinks.append("line")
                    .attr("class", "link")
                    .style("stroke-width", function (d) { return Math.sqrt(d.value);    });

        var labelLine = olinks.append("text")
                    .attr("x", 12)
                    .attr("dy", ".35em")
                    .text("eeeeee");

        var gnodes = svg.selectAll('g.gnode')
           .data(graph.nodes)
           .enter()
           .append('g')
           .classed('gnode', true);

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

        var labels = gnodes.append("text")
                        .attr("x", 12)
                        .attr("dy", ".35em")
                        .text(function (d) { return d.name; });

        console.log(labels);

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

            gnodes.attr("transform", function (d) {
                return 'translate(' + [d.x, d.y] + ')';
            });



        });
    };

    drawGraph(graph);

 </script>

Answer 1

This是一个行为正确的例子。

关键点在这里：

1）您需要将链接定义为SVG＆＃34; g＆＃34;元素，以便您可以为每个链接定义行和标签，并正确计算坐标。

2）标签文本必须水平居中（代码：.attr("text-anchor", "middle"））。

3）在tick（）内，你需要计算标签的坐标，作为源节点和目标节点之间的算术平均值。

希望这有帮助。

最近还有another similar question。

强制图中一条线上的D3标签

1 个答案: