如何在块“带有分支之间的链接的树”中将crossDiagonal函数从d3版本3更新到版本5

Question

我正在尝试更新以下块以用于d3版本5：在https://bl.ocks.org/schutt/91bf0ff0cba3908bf243找到

“分支之间具有链接的树”

我已经更新了树生成函数以使用版本5语法（例如，用新版本替换d3.svg.diagonal（）和d3.layout.tree（）等），以及带有节点和实线链接按预期绘制。

问题是，当从crossDiagonal（）函数内部（然后在对角线（）子函数内部）生成虚线的路径（交叉对角线链接）时。控制台记录以下错误：属性d：预期数字“ M，CNaN，NaN NaN，Na ...”

我已经缩小了我认为问题所在，即在传递给对角线（）函数以创建路径don的对象上调用的“ x”，“ y”和“ depth”属性这些对象上不存在。

我已经将控制台不同区域的值记录下来，并在下面写了注释，以便您查看。

谁能帮助我弄清楚为什么将数据对象传递给此crossDiagonal函数（请参见上面的块链接以获取完整代码）为什么在它们上没有必要的属性来绘制路径？整个模块都可以在版本3中使用，而在版本5中，到目前为止，我所做的更新都可以正常运行带有节点和实体链接的主图，因此，我需要修复一些东西才能使crossDiagonal函数起作用以绘制版本5中的虚线交叉链接。

var crossDiagonal = function() {

  var source = function( d ) { 
      //console.log(d.source); //source contains name and children only. no x or y or depth values
      return d.source; 
    };
  var target = function( d ) { return d.target; };
  var projection = function( d ) { return [d.x, d.y]; };
  var distance_factor = 10;
  var shift_factor = 2;

  function diagonal( d, i ) {
      var p0 = source(d); 
      console.log("d.source:");
      console.log(d.source); //This is an object with only a children array and a name property

      var p3 = target(d);
      console.log("d.target:");
      console.log(d.target); //This is an object with only a children array and a name property

      //**** problem starts here. p0 and p3 don't have x, y or depth values
      var l = ( p0.x + p3.x ) / 2;
      var m = ( p0.x + p3.x ) / 2;
      var x_shift = 0;
      var y_shift = 0;
      if ( p0.x === p3.x ) {
          x_shift = ( p0.depth > p3.depth ? -1 : 1 ) *
              shift_factor + ( p3.y - p0.y ) / distance_factor;
      }
      if ( p0.y === p3.y ) {
          y_shift = ( p0.x > p3.x ? -1 : 1 ) *
              shift_factor + ( p3.x - p0.x ) / distance_factor;
      }
      var p = [
          p0,
          { x: m + x_shift, y: p0.y + y_shift },
          { x: l + x_shift, y: p3.y + y_shift },
          p3
      ];
      p = p.map( projection );
      //console.log('M' + p[0] + 'C' + p[1] + ' ' + p[2] + ' ' + p[3])
      return 'M' + p[0] + 'C' + p[1] + ' ' + p[2] + ' ' + p[3];
  }

  diagonal.source = function( x ) {
    if ( !arguments.length ) return source;
    source = d3.functor( x );
    return diagonal;

  };

  diagonal.target = function( x ) {
    if ( !arguments.length ) return target;
    target = d3.functor( x );
    return diagonal;
  };

  diagonal.projection = function( x ) {
    if ( !arguments.length ) return projection;
    projection = x;
    return diagonal;
  };

    //console.log("diagonal x" + diagonal);
  return diagonal;
};