Highcharts桑基图如何隐藏同节点重复连接线仅显示单条并调整高度

1. 隐藏左侧重复连接线 #

桑基图遇到source和target相同的自循环数据流时，默认会生成两条对称的连接线，只需在图表渲染回调中过滤出流入节点的左侧连接线，设置隐藏即可：

Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        const series = this.series[0];
        series.points.forEach(point => {
          // 筛选自循环边
          if (point.from === point.to) {
            // 隐藏流入节点的左侧连接线
            if (point.linkBase[1] > point.shapeArgs.y) {
              point.graphic.hide();
            }
          }
        })
      }
    }
  },
  series: [{
    type: 'sankey',
    data: [
      ['Brazil', 'Portugal', 5],
      ['Canada', 'Portugal', 1],
      ['Portugal', 'Portugal', 2], // 自循环数据
      ['Portugal', 'Argentina', 1],
      ['Portugal', 'Uruguay', 1]
    ]
  }]
});

2. 调整自循环连接线高度 #

在上述回调中，对保留的右侧自循环连接线修改SVG路径参数，降低高度即可：

render: function() {
  const series = this.series[0];
  series.points.forEach(point => {
    if (point.from === point.to) {
      if (point.linkBase[1] > point.shapeArgs.y) {
        point.graphic.hide();
      } else {
        // 调整保留的右侧连接线高度，可自行调整0.3的比例适配需求
        let path = point.graphic.attr('d');
        path = path.replace(/([0-9.]+)(?= [LC])/g, (match, y) => {
          return parseFloat(y) * 0.3 + point.shapeArgs.y * 0.7;
        });
        point.graphic.attr({d: path});
      }
    }
  })
}

注意：如果需要更精准的高度控制，可以直接获取节点的坐标后，自定义路径的上下边界数值，不需要按比例缩放。

内容的提问来源于stack exchange，提问作者Dương Thành Nhân