javascript - 如何使用 d3.js 将层次图的曲线变为直线

Question

我在 d3.js 中找到了一个带有员工层次结构的示例。我在将曲线更改为直线时遇到问题，如下图所示。

var attrs = {
    EXPAND_SYMBOL: '\uf067',    
    COLLAPSE_SYMBOL: '\uf068',
    selector: params.selector,
    root: params.data,
    width: params.chartWidth,
    height: params.chartHeight,
    index: 0,
    nodePadding: 9,
    collapseCircleRadius: 7,
    nodeHeight: 50,
    nodeWidth: 210,
    duration: 750,
    rootNodeTopMargin: 20,
    minMaxZoomProportions: [0.05, 3],
    linkLineSize: 180,
    collapsibleFontSize: '10px',
    userIcon: '\uf007',
    nodeStroke: "#ccc",
    nodeStrokeWidth: '1px'
  }

var diagonal = d3.svg.diagonal()
    .projection(function(d) {      
      return [d.x + attrs.nodeWidth / 2, d.y + attrs.nodeHeight / 2];
    });

我已经尝试使用上述两个代码。我无法获得如下图所示的曲线。你能帮我解决这个问题吗？


(来源: noaa.gov)

下面的链接是图表引用链接。

Employees Hierarchy Chart

Answer 1

这有点骇人听闻，但仍然有效。替换diagonal的定义与以下。

var line = d3.svg.diagonal()
    .projection(function(d) {
      return [d.x + attrs.nodeWidth / 2, d.y + attrs.nodeHeight / 2];
    });
var diagonal = d => line(d).replace('C', 'L');

它通过将三次贝塞尔曲线(“C”代表三次)的 SVG 路径定义转换为线的路径定义(“L”代表线)来工作。例如， M105,40C105,130 -270,130 -270,220至 M105,40L105,130 -270,130 -270,220 .

这是您的示例的固定版本。 Fiddle