在D3强制有向图中为链接添加标签

Question

我创建了一个强制导向图，但我无法在创建的链接中添加文本。

我该怎么办？

以下是我的代码link

我使用以下行在链接上附加标题，但它不会出现。

link.append("title")
  .text(function (d) {
     return d.value;
   });

我做错了什么？

Answer 1

This link包含您需要的解决方案。

这里的关键点是＆＃34;标题＆＃34;添加工具提示。对于标签，您必须提供稍微复杂（但不是过于复杂）的代码，例如上面链接示例中的代码：

// Append text to Link edges
var linkText = svgCanvas.selectAll(".gLink")
    .data(force.links())
    .append("text")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("x", function(d) {
        if (d.target.x > d.source.x) {
            return (d.source.x + (d.target.x - d.source.x)/2); }
        else {
            return (d.target.x + (d.source.x - d.target.x)/2); }
    })
    .attr("y", function(d) {
        if (d.target.y > d.source.y) {
            return (d.source.y + (d.target.y - d.source.y)/2); }
        else {
            return (d.target.y + (d.source.y - d.target.y)/2); }
    })
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("dy", ".35em")
    .text(function(d) { return d.linkName; });

代码的想法很简单：它计算链接的中点，并在该位置显示一些文本（您可以决定该文本实际是什么）。还有一些额外的计算和条件，您可以从代码中找出它，但是您无论如何都希望根据您的需求和美学来改变它们。

编辑：这里的重要注意事项是＆＃34; gLink＆＃34;是以前使用此代码定义的链接类的名称：

// Draw lines for Links between Nodes
var link = svgCanvas.selectAll(".gLink")
    .data(force.links())

在您的示例中，可能会有所不同，您需要调整代码。

---

---

以下是如何将上述示例中的解决方案纳入另一个没有链接标签的力布局示例的指南：

SVG对象组织和数据绑定

在D3强制定向布局中，必须为布局提供节点和链接数组，并且必须调用force.start（）。之后，视觉元素可以创建为需求和设计。在我们的例子中，下面的代码初始化了SVG＆＃34; g＆＃34;每个链接的元素。这个＆＃34; g＆＃34; element应该包含一个可视化表示链接的行，以及与该链接对应的文本。

force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
   .enter()
    .append("g")
    .attr("class", "link")
    .append("line")
    .attr("class", "link-line")
    .style("stroke-width", function (d) {
        return Math.sqrt(d.value);
    });

var linkText = svg.selectAll(".link")
    .append("text")
    .attr("class", "link-label")
   .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        return d.value;
    });

＆＃34; G＆＃34;元素有类＆＃34;链接＆＃34;，行有类＆＃34;链接线＆＃34;，广告标签有类＆＃34;链接标签＆＃34;。这样做是为了使＆＃34; g＆＃34;可以很容易地选择元素，并且可以通过类＆＃34; link-line＆＃34;在CSS文件中方便地设置线条和标签的样式。和＆＃34;链接标签＆＃34; （虽然在这个例子中没有使用这种样式）。

这里没有初始化线条和文字的位置，因为无论如何它们都会更新动画。

强制导向动画

为了让动画可见，＆＃34;勾选＆＃34;函数必须包含确定行和文本位置的代码：

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

    linkText
        .attr("x", function(d) {
            return ((d.source.x + d.target.x)/2);
        })
        .attr("y", function(d) {
            return ((d.source.y + d.target.y)/2);
        });

以下是结果示例：plunker