0

我正在基于Bernhard Zuba 的 D3.js Organizational Chart在 D3 中创建一个组织结构图。组织结构图模拟了一个组织，其中任何给定的人（由白色方块表示）可能有一百左右的人紧随其后（一个非常扁平的树结构，黑色贝塞尔曲线代表每个父子关系）。

这是树的一部分的屏幕截图： 平树

这是上图中父节点底部的放大图： 在此处输入图像描述

问题是子节点和父节点之间的链接往往都聚集在一起，导致一条非常粗的黑线具有非常平缓的斜率，这可能有点碍眼。

我用来生成链接的函数如下：

// Diagonal function
var diagonal = d3.svg.diagonal()
.source(function (d) {
    return {
        x: d.source.x + (rectW / 2),
        y: d.source.y + rectH - 10
    };
})
.target(function (d) {
    return {
        x: d.target.x + (rectW / 2),
        y: d.target.y + 10
    };
})
.projection(function (d) {
    return [d.x, d.y];
});

这里，rectW是每个节点的宽度，是每个节点rectH的高度。

我想做的是对用于生成链接的贝塞尔函数进行一些细微的调整。具体来说，我想稍微展平控制点，以便曲线起点和终点的曲线更具戏剧性。如果有人能告诉我如何改变用于diagonal()生成贝塞尔曲线的函数，我可以弄清楚其余的。

4

1 回答 1

1

如果您查看svg.diagonal的源代码，我真的看不出直接调整控制点的方法。您可能认为您可以为此使用投影，但这将转换用于生成路径的所有 4 个点。现在，我想我们可以对投影有点 hacky 并做这样的事情：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://d3js.org/d3.v3.min.js"></script>
</head>

<body>
  <script>
    var data = [{
        source: {
          x: 10,
          y: 10
        },
        target: {
          x: 200,
          y: 200
        }
      }, {
        source: {
          x: 50,
          y: 50
        },
        target: {
          x: 200,
          y: 200
        }
      }];

    var svg = d3.select('body')
      .append('svg')
      .attr('width', 205)
      .attr('height', 205);

    var diagonal = d3.svg.diagonal()
      .projection(function(d) {
        if (!this.times) this.times = 0;
        this.times++;
        console.log(this.times);
        if (this.times === 1) {
          return [d.x, d.y];
        } else if (this.times === 2) {
          return [d.x - 25, d.y]
        } else if (this.times === 3) {
          return [d.x + 25, d.y];
        } else if (this.times === 4) {
          this.times = 0;
          return [d.x, d.y];
        }
      });

    svg.selectAll('path')
      .data(data)
      .enter()
      .append('path')
      .attr('d', diagonal)
      .style('fill', 'none')
      .style('stroke', 'black');
  </script>
</body>

</html>

我可能想多了。您可能会更好地自己绘制弧线：

    <!DOCTYPE html>
    <html>

    <head>
      <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://d3js.org/d3.v3.min.js"></script>
    </head>

    <body>
      <script>
        var data = [{
            source: {
              x: 10,
              y: 10
            },
            target: {
              x: 200,
              y: 200
            }
          }, {
            source: {
              x: 200,
              y: 10
            },
            target: {
              x: 10,
              y: 200
            }
          }];

        var svg = d3.select('body')
          .append('svg')
          .attr('width', 205)
          .attr('height', 205);

        svg.selectAll('path')
          .data(data)
          .enter()
          .append('path')
          .attr('d', function(d){
              var s = d.source,
                  t = d.target,
                  m = (s.y + t.y) / 2,
                  p0 = [s.x, s.y],
                  p1 = [s.x, m],
                  p2 = [t.x, m],
                  p3 = [t.x, t.y];
              
              // adjust constrol points
              p1[0] -= 25;
              p2[0] += 25;
                  
              return "M" + p0 + "C" + p1 + " " + p2 + " " + p3;    
          })
          .style('fill', 'none')
          .style('stroke', 'black');
      </script>
    </body>

    </html>

于 2016-10-14T19:46:43.330 回答