如何控制D3树中的链接? [英] How do I control the links in my D3 tree?

问题描述

我正在修改一个开放源代码库， angular-d3-tree 我很难在D3树中获取到我的节点的链接.这是我的树的样子:

I am modifying an open source library, angular-d3-tree I am having hard time getting the links to my nodes in my D3 tree. Here is what my tree looks like:

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

I want my links to start at the center of the back of rectangles not the top left of the rectangle. I think that is is controlled from this method defined in 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进行更改，但结果却不理想.我不明白...

I have tried to make changes to diagonalCurvedPath with disastrous results. I don't understand what ...

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?请帮忙，因为我只是抓着稻草，什么都没走:(

... means. What's M and what the heck is C? Please help as I am just grasping at straws and not getting anywhere :(

推荐答案

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

ok I figured it out. by reading this: https://www.dashingd3js.com/svg-paths-and-d3js I am now using this code to set 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是我要绘制的矩形节点的宽度和高度.

Where rect_width and rect_height are the width and height of the rectangle nodes I am draw the curves between.

这篇关于如何控制D3树中的链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！