Как реализовать взаимосвязь между узлами в сетевом графе, используя JavaScript? - PullRequest
Новая
       106

Как реализовать взаимосвязь между узлами в сетевом графе, используя JavaScript?

0 голосов
/ 12 ноября 2019

Я использую сетевой график в Highcharts.

Требование состоит в том, что "должно быть соединение между узлами", как упомянуто в диаграмме с использованием JavaScript. Expected output

Но я мог добиться только базовой структуры, как показано здесь: 

function showConnection(sample, prefix) {
        const new_array = [];
        for (let i = 1; i <= 10; i++) {
            new_array.push([sample, prefix + i]);
        }

        return new_array;
}

JSfiddle: Network Graph

Может кто-нибудь проверить, как это реализовать?

1 Ответ

2 голосов
/ 12 ноября 2019

Вы можете вставить необходимые соединения также в массив, и они будут доступны на графике в качестве соединений.

Пример: 

new_array.push([prefix+10, prefix + 1]);
new_array.push([prefix+5, prefix + 9]);
new_array.push([prefix+10, prefix + 9]);


/* This below code snippet showConnection() is for generating nodes,
How to modify this to implement interconnection between nodes??? */

function showConnection(sample, prefix) {
        const new_array = [];
        for (let i = 1; i <= 10; i++) {
            new_array.push([sample, prefix + i]);
        }
        new_array.push([prefix+10, prefix + 1]);
        new_array.push([prefix+5, prefix + 9]);
        new_array.push([prefix+10, prefix + 9]);


        return new_array;
}



Highcharts.addEvent(
    Highcharts.Series,
    'afterSetOptions',
    function (e) {
        var colors = Highcharts.getOptions().colors,
            i = 0,
            nodes = {};

        if (
            this instanceof Highcharts.seriesTypes.networkgraph &&
            e.options.id === 'lang-tree'
        ) {
            e.options.data.forEach(function (link) {

                if (link[0] === 'A') {
                    nodes['A'] = {
                        id: 'A',
                        marker: {
                            radius: 20
                        }
                    };
                    nodes[link[1]] = {
                        id: link[1],
                        marker: {
                            radius: 10
                        },
                        color: colors[i++]
                    };
                } else if (nodes[link[0]] && nodes[link[0]].color) {
                    nodes[link[1]] = {
                        id: link[1],
                        color: nodes[link[0]].color
                    };
                }
            });

            e.options.nodes = Object.keys(nodes).map(function (id) {
                return nodes[id];
            });
        }
    }
);

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph',
        height: '100%',
        zoomType: 'xy'
    },
    title: {
        text: 'The Indo-European Language Tree'
    },
    subtitle: {
        text: 'A Force-Directed Network Graph in Highcharts'
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to'],
            layoutAlgorithm: {
                enableSimulation: true,
                friction: -0.9
            }
        }
    },
    series: [{
        dataLabels: {
            enabled: true,
            linkFormat: ''
        },
        id: 'lang-tree',
        data: showConnection('Item', 'SubItem')
    }]
});
#container {
	min-width: 320px;
	max-width: 800px;
	margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
...