更改 d3 强制布局链接样式以匹配 d3-tree 外观

Posted 2023-02-22

【中文标题】更改 d3 强制布局链接样式以匹配 d3-tree 外观

【英文标题】：Change d3 force layout link style to match d3-tree look

【发布时间】：2019-08-21 05:51:20

【问题描述】：

我正在尝试用 d3 绘制家谱。为此，我想使用通常的节点链接图（如this one）：

但是使用通常在d3 trees 中找到的链接样式，即具有水平（或垂直）末端的贝塞尔曲线：

是否可以相应地更改链接，而无需深入研究 d3-force 代码？

【参考方案1】：

如果您只是想匹配链接的样式，则无需深入研究 d3-force 代码，它只计算位置，与样式无关。

每个链接对于源和目标都有一个 x 和 y 值。如果您将在大多数强制布局示例中找到的链接源和目标的行替换为路径，则可以使用这些 x 和 y 值来设置您想要的任何类型的链接的样式。

我在下面使用 d3v4+ - 你的示例使用 d3v3。

选项 1 - 使用内置链接

在 d3v3 中你会使用 d3.svg.diagonal，但现在有 d3.linkVertical() 和 d3.linkHorizontal() 来实现相同的目的。有了这个我们可以使用：

d3.linkVertical()
      .x(function(d)  return d.x; )
      .y(function(d)  return d.y; ));

然后塑造代表链接的路径：

 link.attr("d",d3.linkVertical()
      .x(function(d)  return d.x; )
      .y(function(d)  return d.y; ));

我只在下面做了一个垂直样式 - 但您可以确定 x 坐标的差异是否大于 y 坐标以确定您应该应用水平样式还是垂直样式。

var svg = d3.select("svg");
  
var nodes = "abcdefg".split("").map(function(d) 
  return name:d;
)

var links = "bcdef".split("").map(function(d) 
  return target:"a", source:d
)
links.push(target:"d", source:"b",target:"d", source:"g")
 
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d)  return d.name; ))
    .force("charge", d3.forceManyBody().strength(-1000))
    .force("center", d3.forceCenter(250,150));

var node = svg.append("g")
 .selectAll("circle")
 .data(nodes)
 .enter().append("circle")
 .attr("r", 5)

var link = svg.append("g")
 .selectAll("path")
 .data(links)
 .enter().append("path")


simulation
 .nodes(nodes)
 .on("tick", ticked)
 .force("link")
    .links(links);  
      
function ticked() 
    link.attr("d", d3.linkVertical()
          .x(function(d)  return d.x; )
          .y(function(d)  return d.y; ));
          
    node
        .attr("cx", function(d)  return d.x; )
        .attr("cy", function(d)  return d.y; );

path 
   stroke: black;
   stroke-width: 2px;
   fill:none;
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg  >

选项 2 - 手动指定路径

我们可以用路径替换用于连接节点的线，我们可以手动提供路径的d 属性，因为路径的基准包含目标和源的 x,y。也许是这样的：

path.attr("d", function(d) 
  var x0 = d.source.x;
  var y0 = d.source.y;
  var x1 = d.target.x;
  var y1 = d.target.y;
  var xcontrol = x1 * 0.5 + x0 * 0.5;
  return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
)

同样，我在这里只做了一个样式，这次是水平的，但是添加一个检查是否需要水平或垂直链接应该相当简单：

var svg = d3.select("svg");
  
var nodes = "abcdefg".split("").map(function(d) 
  return name:d;
)

var links = "bcdef".split("").map(function(d) 
  return target:"a", source:d
)
links.push(target:"d", source:"b",target:"d", source:"g")
 
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d)  return d.name; ))
    .force("charge", d3.forceManyBody().strength(-1000))
    .force("center", d3.forceCenter(250,150));

var node = svg.append("g")
 .selectAll("circle")
 .data(nodes)
 .enter().append("circle")
 .attr("r", 5)

var link = svg.append("g")
 .selectAll("path")
 .data(links)
 .enter().append("path")


simulation
 .nodes(nodes)
 .on("tick", ticked)
 .force("link")
    .links(links);
      
      
function ticked() 
    link.attr("d", function(d) 
      var x0 = d.source.x;
      var y0 = d.source.y;
      var x1 = d.target.x;
      var y1 = d.target.y;
      var xcontrol = x1 * 0.5 + x0 * 0.5;
      return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
    )

    node
        .attr("cx", function(d)  return d.x; )
        .attr("cy", function(d)  return d.y; );

path 
   stroke: black;
   stroke-width: 2px;
   fill:none;
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg  >

选项 3 - 使用自定义曲线生成器

我包含这个是因为我just recently answered 一个关于自定义曲线的问题，它偶然使用了相同的样式。这样我们就可以定义每个链接的路径：

var line = d3.line().curve(d3.someCurve))

和

link.attr("d", function(d) 
  return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
)

我也添加了几条线来构建上面的示例，曲线可以是垂直的或水平的：

var curve = function(context) 
  var custom = d3.curveLinear(context);
  custom._context = context;
  custom.point = function(x,y) 
    x = +x, y = +y;
    switch (this._point) 
      case 0: this._point = 1; 
        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
        this.x0 = x; this.y0 = y;        
        break;
      case 1: this._point = 2;
      default: 
        if (Math.abs(this.x0 - x) > Math.abs(this.y0 - y)) 
           var x1 = this.x0 * 0.5 + x * 0.5;
           this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);       
        
        else 
           var y1 = this.y0 * 0.5 + y * 0.5;
           this._context.bezierCurveTo(this.x0,y1,x,y1,x,y);            
        
        this.x0 = x; this.y0 = y; 
        break;
    
  
  return custom;


var svg = d3.select("svg");

var line = d3.line()
  .curve(curve);
  
var nodes = "abcdefg".split("").map(function(d) 
  return name:d;
)

var links = "bcdef".split("").map(function(d) 
  return target:"a", source:d
)
links.push(target:"d", source:"b",target:"d", source:"g")
 
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d)  return d.name; ))
    .force("charge", d3.forceManyBody().strength(-1000))
    .force("center", d3.forceCenter(250,150));

var node = svg.append("g")
 .selectAll("circle")
 .data(nodes)
 .enter().append("circle")
 .attr("r", 5)

var link = svg.append("g")
 .selectAll("path")
 .data(links)
 .enter().append("path")


simulation
 .nodes(nodes)
 .on("tick", ticked)
 .force("link")
    .links(links);
      
      
function ticked() 
    link.
      attr("d", function(d) 
        return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
      )

    node
        .attr("cx", function(d)  return d.x; )
        .attr("cy", function(d)  return d.y; );

 path 
   stroke: black;
   stroke-width: 2px;
   fill:none;
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg  >

此选项也适用于画布（如果我没记错的话，选项 1 也适用）。

【讨论】：

非常好！我意识到我可以同时使用选项 2，但即使在那里你也设法用 ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" "); 向我展示了一个不错的技巧，谢谢！