Question

我正在修改一个开源库angular-d3-tree 我很难获得到D3树中节点的链接。这是我的树的样子：

我希望链接从矩形后面的中心开始，而不是矩形的左上方。我认为这是由angular-d3-tree中定义的此方法控制的：

  // Creates a curved (diagonal) path from parent to the child nodes
  diagonalCurvedPath(s, d) {
    console.log('diagonalCurvedPath() called s and d are:');
    console.log(s);
    console.log(d);
    const path = `M ${s.y} ${s.x}
            C ${(s.y + d.y) / 2} ${s.x},
              ${(s.y + d.y) / 2} ${d.x},
              ${d.y} ${d.x}`

    return path
  }

diagonalCurvedPath用于此例程：

  setLinks( source: any, treeData: any){
    let links = treeData.descendants().slice(1);
    var link = this.svg.selectAll('path.link')
        .data(links, function(d) { return d.id; });

    // Enter any new links at the parent's previous position.
    var linkEnter = link.enter().insert('path', "g")
        .attr("class", "link")
        .attr('d', (d)=>{
          var o = {x: source.x0, y: source.y0}
          return this.diagonalCurvedPath(o, o)
        });

    var linkUpdate = linkEnter.merge(link);

    linkUpdate.transition()
        .duration(this.duration)
        .attr('d', (d)=>{return this.diagonalCurvedPath(d, d.parent)});

    var linkExit = link.exit().transition()
        .duration(this.duration)
        .attr('d', (d) => {
          var o = {x: source.x, y: source.y}
          return this.diagonalCurvedPath(o, o)
        })
        .remove();
  }

我尝试对diagonalCurvedPath进行更改，但结果却不理想。我不明白...

const path = `M ${s.y} ${s.x}
        C ${(s.y + d.y) / 2} ${s.x},
          ${(s.y + d.y) / 2} ${d.x},
          ${d.y} ${d.x}`

...意味着。 M是什么，C是什么？请帮忙，因为我只是抓着稻草，什么都没走:(

Answer 1

好，我知道了。通过阅读以下内容：https://www.dashingd3js.com/svg-paths-and-d3js 我现在正在使用此代码设置path。

/*
M ( m ) x, y    moveto

Move the pen to a new location. No line is drawn. All path data must begin with a 'moveto' command.

Cubic Bezier Curve Commands
     C ( c )    x1 y1 x2 y2 x y

     Draw a cubic Bézier curve from the current point to the point (x,y)
     using (x1,y1) as the control point at the beginning of the curve and
     (x2,y2) as the control point at the end of the curve.
 */
const path = `M ${s.y} ${s.x + this.rect_height/2}
              C ${(s.y + d.y + this.rect_width) / 2}  ${s.x + this.rect_height/2}
                ${(s.y + d.y + this.rect_width) / 2}  ${d.x + this.rect_height/2}
                ${d.y + this.rect_width} ${d.x + this.rect_height/2}`

其中rect_width和rect_height是我要绘制的矩形节点的宽度和高度。

如何控制D3树中的链接？

1 个答案: