javascript - Highcharts 网络图布局

Question

我正在使用 Highcharts 库来绘制网络图。但是当数据使两个或多个断开连接的网络时，我遇到了布局问题。然后最大的网络居中并将其他网络推到边缘，使其几乎无法阅读。例子：

Highcharts.chart('container', {
  chart: {
    type: 'networkgraph',
    height: '60%'
  },
  title: {
    text: ''
  },
  plotOptions: {
    networkgraph: {
      keys: ['from', 'to'],
    }
  },
  series: [{
    dataLabels: {
      enabled: true,
      linkFormat: ''
    },
    id: 'demo-tree',
    data: [["demo001", "demo002"], ["demo003", "demo004"], ["demo005", "demo002"], ["demo006", "demo007"], ["demo008", "demo009"], ["demo003", "demo010"], ["demo011", "demo009"], ["demo001", "demo008"], ["demo005", "demo001"], ["demo011", "demo008"], ["demo005", "demo006"], ["demo005", "demo007"], ["demo005", "demo011"], ["demo005", "demo009"], ["demo012", "demo004"], ["demo005", "demo008"], ["demo001", "demo006"], ["demo001", "demo007"]],
    nodes: [{ "id": "demo001", "marker": { "radius": 119 }, "color": "#dc3545" }, { "id": "demo002", "marker": { "radius": 7 }, "color": "#ffc107" }, { "id": "demo003", "marker": { "radius": 9 }, "color": "#ffc107" }, { "id": "demo004", "marker": { "radius": 8 }, "color": "#ffc107" }, { "id": "demo005", "marker": { "radius": 100 }, "color": "#dc3545" }, { "id": "demo006", "marker": { "radius": 77 }, "color": "#dc3545" }, { "id": "demo007", "marker": { "radius": 76 }, "color": "#dc3545" }, { "id": "demo009", "marker": { "radius": 40 }, "color": "#dc3545" }, { "id": "demo008", "marker": { "radius": 33 }, "color": "#dc3545" }, { "id": "demo010", "marker": { "radius": 5 }, "color": "#28a745" }, { "id": "demo011", "marker": { "radius": 40 }, "color": "#dc3545" }, { "id": "demo012", "marker": { "radius": 4 }, "color": "#28a745" }]
  }],

});

<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>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

https://jsfiddle.net/jrb471kc/1/

我想要的是更好地利用空间。而不是这样： 有这样的东西：

我玩弄了 node.mass 属性无济于事。有人对此有解决方案吗？

编辑1：为了更好地解释我的问题，这是我现在得到的一个例子。我想要的是不将大网络居中的图表。将其向左对齐，以便为 2 个小的空间留出空间。

标签： javascripthighcharts