Javascript 向D3力有向图中的链接添加标签

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

我怎样才能做到

下面是我的代码

我已经用下面的一行在链接上添加了标题，但是它没有出现

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

这有什么不对？

包含您需要的解决方案

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

// 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对象组织和数据绑定 在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”元素具有类“链接”，行具有类“链接行”，广告标签具有类“链接标签”。这样做是为了容易地选择“g”元素，并且可以通过类“linkline”和“linklabel”在CSS文件中方便地设置行和标签的样式（尽管在本例中不使用这种样式）

此处不初始化行和文本的位置，因为它们将在动画中更新

力定向动画 为了使动画可见，“勾号”功能必须包含确定行和文本位置的代码：

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

下面是结果示例：

---

是否要向链接添加标签或工具提示？从代码上看，它看起来像工具提示，但从文本上看，它似乎是标签…@VividD我实际上想添加标签。沿边/链接放置标签比这要复杂一些…请参见和。可能会有帮助。我用一些额外的信息完成了答案，希望这将足以让你解决你的问题+++++++为了这么好的解释。有些事情我以前不明白，现在我可以用它来研发了。谢谢你一顿..attr（“x”，函数（d）{if（d.target.x>d.source.x）{return（d.source.x+（d.target.x-d.source.x）/2）}或者{return（d.target.x+（d.source.x-d.target.x）/2）}.attr（“y”，函数（d）{if（d.target.y>d.source.y）{return（d.source.y）{（d.target.y-d.source.y）/2）；}否则{返回（d.target.y+（d.source.y-d.target.y）/2）；}}这是返回NaN。怎么办？