如何将节点与高图对齐答案

【问题标题】：How to aligment nodes with highcharts如何将节点与高图对齐
【发布时间】：2019-12-16 09:51:54
【问题描述】：

我正在尝试对齐节点，但我看不到任何选项如何做到这一点，目前我的代码是

Highcharts.chart('container', {
chart: {
    type: 'networkgraph',
    plotBorderWidth: 1
},
title: {
    text: 'Trans-Siberian Railway'
},
subtitle: {
    text: 'Barnes-Hut approximation'
},
plotOptions: {
    networkgraph: {
        layoutAlgorithm: {
            enableSimulation: false,
            linkLength: 100,
            integration: 'verlet',
            approximation: 'barnes-hut',
            gravitationalConstant: 4,
                // Elastic like forces:
            attractiveForce: function (d, k) {
             return (k - d) / d; 
            },
         /*    repulsiveForce: function (d, k) {
                return Math.min((k * k) / (d), 100);
            } */

        }
    }
},
series: [{
    marker: {
        radius: 3,
        lineWidth: 1
    },
    dataLabels: {
        enabled: true,
        linkFormatter: function () {
            return '';
        }
    },
    nodes: [

       {
        id: 'test',
        marker: {
            radius: 10
        }
    },
    {
        id: 'Moscow',
        marker: {
            radius: 10
        }
    }, {
        id: 'Beijing',
        marker: {
            radius: 10
        }
    },
    {
        id: 'Brussels',
        marker: {
            radius: 10
        }
    },
    {
        id: 'Bangkok',
        marker: {
            radius: 10
        }
    }],
    data: [
        { from: 'Bangkok', to: 'Beijing', color: 'blue' },
        { from: 'Moscow', to: 'Beijing', color: 'blue' },
         { from: 'test', to: 'Moscow', color: 'blue' },
       { from: 'Beijing', to: 'Brussels', color: 'blue' },




    ]
}]

});

代码的结果是：

它仍然没有对齐想要的结果是

【问题讨论】：

您想实现这样的目标吗：jsfiddle.net/BlackLabel/wj0pudb1？
@SebastianWędzel 但它仍然不像我想要的那样基本上都应该像示例一样像直线

标签： reactjs highcharts react-highcharts

【解决方案1】：

您应该能够使用 initialPositions 回调在网络图中设置固定位置。为了使其正常工作，您还需要将 maxIterations 设置为一些较小的值，例如 1。

见demo

initialPositions: function() {
    var chart = this.series[0].chart,
      width = chart.plotWidth,
      height = chart.plotHeight;
      
    this.nodes.forEach(function(node, i) {
        if(i === 0){
        node.plotX = 600;
        node.plotY = 100;
      }
      
      if(i === 1) {
        node.plotX = 350;
        node.plotY = 100;
      }
      
      if(i === 2){
        node.plotX = 200;
        node.plotY = 0;
      }
      
      if(i === 3) {
        node.plotX = 0;
        node.plotY = 0;
      }
      
      if(i === 4) {
        node.plotX = 200;
        node.plotY = 200;
      }
    });
  }

API：https://api.highcharts.com/highcharts/series.networkgraph.layoutAlgorithm.maxIterations

API：https://api.highcharts.com/highcharts/series.networkgraph.layoutAlgorithm.initialPositions

如果您想让这些点不可拖动，也许更简单的解决方案是呈现常规折线图？

演示：https://jsfiddle.net/BlackLabel/06Lkgwbz/

【讨论】：

哇，很酷的演示问题是如果你有更动态的方式，比如如果你有连接到布鲁塞尔的 test2 节点，如何管理计算？另外，如果您没有布鲁塞尔，那么图表不会与一条线对齐...
@VitalyMenchikovsky 要动态渲染这些位置，您需要实现自己的算法。我试图实现这样的东西，但没有成功 - 演示：jsfiddle.net/BlackLabel/2fpvLszg。我在执行底线时遇到问题。也许你能做到。