d3.js - 用线条连接形状(不使用力或其他布局)

您尚未指定节点的连接方式,因此我假设所有内容都与所有内容相关联.原理与任何其他布局相同 - 您获取确定链接并将其传递给的数据.data().在您的代码中,坐标不是数据的一部分,这使得它更冗长,但仍然非常简单.

要添加链接,我正在使用嵌套选择 - 我g为每个节点添加一个元素,并在与所有其他节点的连接下面添加元素.

var lines = svg.selectAll("g.line").data(dataset)
  .enter().append("g").attr("class", "line")
  .selectAll("line").data(dataset)
  .enter().append("line")
  .attr("x1", function(d, i) { return 2*node_radius_wo_pad+i%nodes_in_width*node_dia_inc_pad; })
  .attr("y1", function(d, i) { return 2*node_radius_wo_pad+(parseInt(i/nodes_in_width))*node_dia_inc_pad; })
  .attr("x2", function(d, i, j) { return 2*node_radius_wo_pad+j%nodes_in_width*node_dia_inc_pad; })
  .attr("y2", function(d, i, j) { return 2*node_radius_wo_pad+(parseInt(j/nodes_in_width))*node_dia_inc_pad; });

这为每对节点添加了一行.请注意,它将在相同节点(您将无法看到)之间添加链接,并在每对节点之间添加2个链接 - 一次从一个节点开始,一次在另一个节点开始.我没有在这里过滤掉这些案例以保持代码简单.在您的特定应用程序中,我猜测无论如何都以另一种方式确定连接.

要突出显示在突出显示上连接特定节点的链接,我正在使用links包含所有节点的变量,并过滤掉其起始坐标与圆坐标不同的变量.然后将过滤后的选择涂成红色.

.on("mouseover", function(){
   var that = this;
   lines.filter(function() {
       return d3.select(this).attr("x1") == d3.select(that).attr("cx") && d3.select(this).attr("y1") == d3.select(that).attr("cy");
     }).style("stroke", "red");
   d3.select(this).style("fill", "aliceblue");
})

如果坐标是数据的一部分,那么一切都会变得容易一些,看起来更像是你在力布局中看到的例子.我建议创建一个数据结构很像什么用也为自己的链接,与source和target决定的源和目标节点的属性.

在这里完成示例.