javascript - 向 D3 力定向图中的链接添加标签

Question

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

我该怎么做？

以下是我的代码link

我已经使用以下行在链接上附加标题，但它没有出现。

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

我做错了什么？

Answer 1

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

这里的重点是“title”增加了tooltip。对于标签，您必须提供稍微复杂(但不过分复杂)的代码，例如上面链接示例中的代码:

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

代码的思路很简单:它计算链接的中点，并在该位置显示一些文本(您可以决定该文本实际是什么)。还有一些额外的计算和条件，您可以从代码中弄清楚，但是无论如何您都希望根据您的需要和美学来更改它们。

编辑:这里的重要注意事项是“gLink”是链接类的名称，之前使用此代码定义:

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

在你的例子中，它可能不同，你需要调整代码。

---

---

以下是如何将上述示例中的解决方案合并到另一个没有链接标签的强制布局示例的指南:

SVG 对象组织和数据绑定(bind)

在 D3 力导向布局中，必须为布局提供节点和链接数组，并且必须调用 force.start()。之后，可以根据要求和设计创建视觉元素。在我们的例子中，以下代码为每个链接初始化 SVG“g”元素。这个“g”元素应该包含一条在视觉上表示链接的行，以及对应于该链接的文本。

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

“g”元素有类“link”，线有类“link-line”，广告标签有类“link-label”。这样做是为了可以轻松选择“g”元素，并且可以通过类“link-line”和“link-label”方便地在 CSS 文件中设置线条和标签的样式(尽管此示例中未使用此类样式)。

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

力导向动画

为了使动画可见，“tick”函数必须包含确定线条和文本位置的代码:

    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