4

有一个示例如何在 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>
4

1 回答 1

2

这是一个具有正确行为的示例。

关键点在这里：

1) 您需要将链接定义为 SVG "g" 元素，以便您可以为每个链接定义线条和标签，并且可以正确计算坐标。

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

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

希望这可以帮助。

最近还有另一个类似的问题。

于 2014-05-23T14:42:54.670 回答