具有父节点和公共节点的 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/