在图形数据上有什么方法可以在节点和链接之间添加边距

Question

我想在图表上的节点和连接线之间放置一个空格。

我尝试在节点之间绘制自定义连接链接，但没有办法做到这一点，或者我找不到任何东西。

看这个例子，想象一下线条没有接触节点。 例如：https://echarts.apache.org/examples/en/editor.html?c=graph&reset=1&edit=1

Answer 1

您可以定义第二组不可见的辅助节点来放置链接并使它们比原始节点更大。这是一个示例：

option = {
  series: [
    {
      type: 'graph',
      symbolSize: 70,
      label: {show: true},
      itemStyle: {
        color: '#fff',
        borderWidth: 1,
        borderColor: 'black'
      },
      data: [
        {name: 'A', x: 0, y: 0},
        {name: 'B', x: 10, y: 0},
        {name: 'C', x: 5, y: 7}
      ]
    },
    {
      type: 'graph',
      silent: true,
      symbolSize: 100,
      itemStyle: {
        color: '#fff'
      },
      z: 0,
      edgeSymbol: ['none', 'arrow'],
      lineStyle:{
        color: '#000000',
        curveness: 0.2,
        width: 3,
      },
      data: [
        {name: 'A', x: 0, y: 0},
        {name: 'B', x: 10, y: 0},
        {name: 'C', x: 5, y: 7}
      ],
      links: [
        {source: 'A', target: 'B', lineStyle: {curveness: -0.2}},
        {source: 'A', target: 'C'},
        {source: 'B', target: 'C'},
        {source: 'C', target: 'A'}
      ]
    }
  ]
};

如果您可以在没有链接上的箭头的情况下生活，您可以使用不可见的边框：

itemStyle: {
  borderWidth: 20,
  borderColor: '#fff',
}