javascript - 如何在 d3.js 行上添加链接名称？

Question

我可以显示节点并能够通过链接动态连接节点。这里我显示图像而不是节点(圆圈)。但我试图在行的顶部显示链接名称。我已经浏览了一些链接，但无法显示名称。

我可以在浏览器检查元素中看到文本元素。但文字不可见。这是我的代码。

var nodes = [{"x":100,"y":240,"image":"/fpui/img/lan.png"},{"x":230,"y":240,"image":"/fpui/img/mpvpn_boxsmall.png"},{"x":360,"y":120,"image":"/fpui/img/router.png"},{"x":360,"y":240,"image":"/fpui/img/router.png"},{"x":360,"y":360,"image":"/fpui/img/router.png"},{"x":490,"y":120,"image":"/fpui/img/isp.png"},{"x":490,"y":240,"image":"/fpui/img/isp.png"},{"x":490,"y":360,"image":"/fpui/img/isp.png"},{"x":620,"y":240,"image":"/fpui/img/internet.png"},{"x":750,"y":120,"image":"/fpui/img/server.png"},{"x":750,"y":240,"image":"/fpui/img/server.png"},{"x":750,"y":360,"image":"/fpui/img/server.png"}] jquery-2.0.2.min.js line 4 > eval:405:1
var links = [{"source":0,"target":1,"class":"link-green","name":"LAN"},{"source":1,"target":2,"class":"link-green","name":"WAN1"},{"source":1,"target":3,"class":"link-green","name":"WAN2"},{"source":1,"target":4,"class":"link-green","name":"WAN3"},{"source":2,"target":5,"name":"","class":"link-green"},{"source":3,"target":6,"name":"","class":"link-green"},{"source":4,"target":7,"name":"","class":"link-green"},{"source":5,"target":8,"class":"link-green","name":""},{"source":6,"target":8,"class":"link-green","name":""},{"source":7,"target":8,"class":"link-green","name":""},{"source":8,"target":9,"class":"link-green","name":""},{"source":8,"target":10,"class":"link-green","name":""},{"source":8,"target":11,"class":"link-green","name":""}]

var svg = d3.select('#routeTestDisplay').append('svg')
        .attr('width', width)
        .attr('height', height);

    var force = d3.layout.force()
        .size([width, height])
        .nodes(nodes)
        .links(linkArr)
        .start();
    force.linkDistance(200);
    var link = svg.selectAll('.link')
        .data(linkArr)
        .enter().append('line')
        /*.attr('class', 'link')
         .style("stroke", function(d,i){
         return color(i)
         })*/
        .style("stroke-width", 3);

        link.append("text")
        .attr("class", "link-label")
        .attr("font-family", "Arial, Helvetica, sans-serif")
        .attr("fill", "Black")
        .style("font", "normal 12px Arial")
        .style("color", "black")
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(function(d) {
            return d.name;
        })
            .attr("x", function(d) {
                return ((d.source.x + d.target.x)/2);
            })
            .attr("y", function(d) {
                return ((d.source.y + d.target.y)/2);
            });



    var node = svg.selectAll('.node')
        .data(nodes)
        .enter().append('svg:image')
        .attr("width", 50)
        .attr("height", 50)

    node.attr('r', 30)
        .attr("xlink:href", function(d) {
            return d.image;
        })
        .attr('x', function(d) {
            return d.x - 15;
        })
        .attr('y', function(d) {
            return d.y - 30;
        });
    link.attr('class', function(d) {
        return d.class;
    });
    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;
        });

请问有人可以帮助您实现这一目标吗？

Answer 1

您不能将文本附加到一行，您必须将行和文本附加到同一个父级，如下所示:

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('g') 
    .attr('class', 'link');

var singlelink= link.append('line') //set this as a variable to translate later
   .style('stroke', 'black')
  .style("stroke-width", 3);

link.append("text")
  .attr("class", "link-label") ...

正如代码注释中提到的，我必须将附加到链接变量的行设置为它自己的变量，就像您翻译链接时一样。但链接现在是一个容器而不是线路本身。所以你稍后的翻译函数现在看起来像:

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

完整的工作代码:

var nodes = [{
  "x": 100,
  "y": 240,
  "image": "/fpui/img/lan.png"
}, {
  "x": 230,
  "y": 240,
  "image": "/fpui/img/mpvpn_boxsmall.png"
}, {
  "x": 360,
  "y": 120,
  "image": "/fpui/img/router.png"
}, {
  "x": 360,
  "y": 240,
  "image": "/fpui/img/router.png"
}, {
  "x": 360,
  "y": 360,
  "image": "/fpui/img/router.png"
}, {
  "x": 490,
  "y": 120,
  "image": "/fpui/img/isp.png"
}, {
  "x": 490,
  "y": 240,
  "image": "/fpui/img/isp.png"
}, {
  "x": 490,
  "y": 360,
  "image": "/fpui/img/isp.png"
}, {
  "x": 620,
  "y": 240,
  "image": "/fpui/img/internet.png"
}, {
  "x": 750,
  "y": 120,
  "image": "/fpui/img/server.png"
}, {
  "x": 750,
  "y": 240,
  "image": "/fpui/img/server.png"
}, {
  "x": 750,
  "y": 360,
  "image": "/fpui/img/server.png"
}] 
//jquery - 2.0.2. min.js line 4 > eval: 405: 1
var links = [{
  "source": 0,
  "target": 1,
  "class": "link-green",
  "name": "LAN"
}, {
  "source": 1,
  "target": 2,
  "class": "link-green",
  "name": "WAN1"
}, {
  "source": 1,
  "target": 3,
  "class": "link-green",
  "name": "WAN2"
}, {
  "source": 1,
  "target": 4,
  "class": "link-green",
  "name": "WAN3"
}, {
  "source": 2,
  "target": 5,
  "name": "",
  "class": "link-green"
}, {
  "source": 3,
  "target": 6,
  "name": "",
  "class": "link-green"
}, {
  "source": 4,
  "target": 7,
  "name": "",
  "class": "link-green"
}, {
  "source": 5,
  "target": 8,
  "class": "link-green",
  "name": ""
}, {
  "source": 6,
  "target": 8,
  "class": "link-green",
  "name": ""
}, {
  "source": 7,
  "target": 8,
  "class": "link-green",
  "name": ""
}, {
  "source": 8,
  "target": 9,
  "class": "link-green",
  "name": ""
}, {
  "source": 8,
  "target": 10,
  "class": "link-green",
  "name": ""
}, {
  "source": 8,
  "target": 11,
  "class": "link-green",
  "name": ""
}]
console.log(links)
var width = 1500,height=1500;
var svg = d3.select('#routeTestDisplay').append('svg')
  .attr('width', width)
  .attr('height', height);

var force = d3.layout.force()
  .size([width, height])
  .nodes(nodes)
  .links(links)
  .start();
force.linkDistance(200);

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('g') 
    .attr('class', 'link');
var singlelink= link.append('line')
   .style('stroke', 'black')
  .style("stroke-width", 3);

link.append("text")
  .attr("class", "link-label")
  .attr("font-family", "Arial, Helvetica, sans-serif")
  .attr("fill", "Black")
  .style("font", "normal 12px Arial")
  .style("color", "black")
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d.name;
  })
  .attr("x", function(d) {
    return ((d.source.x + d.target.x) / 2);
  })
  .attr("y", function(d) {
    return ((d.source.y + d.target.y) / 2);
  });



var node = svg.selectAll('.node')
  .data(nodes)
  .enter().append('svg:image')
  .attr("width", 50)
  .attr("height", 50)

node.attr('r', 30)
  .attr("xlink:href", function(d) {
    return "https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg"
  })
  .attr('x', function(d) {
    return d.x - 15;
  })
  .attr('y', function(d) {
    return d.y - 30;
  });
  
link.attr('class', function(d) {
  return d.class;
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='routeTestDisplay'></div>

附注

顺便说一句，我必须编辑您正在使用的链接数组的名称以及图像，因为显然它们的链接不起作用