javascript - 具有父节点和公共(public)节点的 d3 和 Highcharts 图

Question

我正在寻找一些能够创建如下简单图表的图表:左侧可以是 n 条线(结构如 test + moscow)，并且全部连接到单点，右侧也可以是 n 条线，以单点开始，结构可以与左侧相同。另外，单击节点时最好有一些菜单。我尝试了一些图表，例如 Highcharts/react-d3-tree，但没有找到任何方法使其成为可能

Answer 1

要创建该类型的图表，您可以使用networkgraph系列类型:https://www.highcharts.com/docs/chart-and-series-types/network-graph

<小时/>

此外，如果您有静态数据，则可以使用 scatter 和 line 系列类型来构建它:

Highcharts.chart('container', {
    series: [{
        type: 'scatter',
        id: 'mainSeries',
        zIndex: 1,
        marker: {
            radius: 8
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        },
        keys: ['x', 'y', 'name'],
        data: [
            [0, 3, 'test'],
            [1, 3, 'Moscwo'],
            [2, 2, 'Beijing'],
            [1, 1, 'Brussels'],
            [3, 2, 'Bangkok']
        ]
    }, {
        enableMouseTracking: false,
        color: 'blue',
        linkedTo: 'mainSeries',
        zIndex: 0,
        data: [
            [0, 3],
            [1, 3],
            [2, 2],
            [3, 2]
        ]
    }, {
        enableMouseTracking: false,
        color: 'blue',
        linkedTo: 'mainSeries',
        zIndex: 0,
        data: [
            [1, 1],
            [2, 2]
        ]
    }],
    ...
});

<小时/>

实例: http://jsfiddle.net/BlackLabel/ns9dgy34/