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

Question

我创建了一个力导向图,但是我无法在创建的链接中添加文本.

我怎么能这样做？

以下是我的代码链接

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

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

我做错了什么？

Answer 1

此链接包含您需要的解决方案.

这里的关键点是"标题"增加了工具提示.对于标签,您必须提供稍微复杂(但不是过于复杂)的代码,例如上面链接中的示例中的代码:

// 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"元素,并且可以通过类"link-line"和"link-label"方便地在CSS文件中设置线条和标签的样式(尽管在该示例中不使用这样的样式).

这里没有初始化行和文本的位置,因为它们无论如何都会更新duting动画.

强制导向的动画

为了使动画可见,"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