Как мне управлять ссылками в моем дереве D3?

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 - это ширина и высота узлов прямоугольника. Я рисую кривые между.