javascript plotly中绘制三维网络图

oxf4rvwz 于 2023-02-11 发布在 Java

关注(0)|答案(1)|浏览(178)

- bounty将在7天后过期**。回答此问题可获得+100声望奖励。Natasha希望引起更多人对此问题的关注：如何使用plotly绘制三维网络图中的线？

我正在尝试使用plotly.js绘制3D网络

<html>
  <head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <body>
    <div id="myDiv"></div>
    <script>
      var nodes = [
        { x: 0, y: 0, z: 0 },
        { x: 1, y: 1, z: 1 },
        { x: 2, y: 0, z: 2 },
        { x: 3, y: 1, z: 3 },
        { x: 4, y: 0, z: 4 }
      ];

      var edges = [
        { source: 0, target: 1 },
        { source: 1, target: 2 },
        { source: 2, target: 3 },
        { source: 3, target: 4 }
      ];

      var x = [];
      var y = [];
      var z = [];

      for (var i = 0; i < nodes.length; i++) {
        x.push(nodes[i].x);
        y.push(nodes[i].y);
        z.push(nodes[i].z);
      }

      var xS = [];
      var yS = [];
      var zS = [];
      var xT = [];
      var yT = [];
      var zT = [];

      for (var i = 0; i < edges.length; i++) {
        xS.push(nodes[edges[i].source].x);
        yS.push(nodes[edges[i].source].y);
        zS.push(nodes[edges[i].source].z);
        xT.push(nodes[edges[i].target].x);
        yT.push(nodes[edges[i].target].y);
        zT.push(nodes[edges[i].target].z);
      }

      var traceNodes = {
        x: x, y: y, z: z,
        mode: 'markers',
        marker: { size: 12, color: 'red' },
        type: 'scatter3d'
      };

      var traceEdges = {
        x: [xS, xT],
        y: [yS, yT],
        z: [zS, zT],
        mode: 'lines',
        line: { color: 'red', width: 2},
        opacity: 0.8,
        type: 'scatter3d'
      };
      
      var layout = {
        margin: { l: 0, r: 0, b: 0, t: 0 }
      };

      Plotly.newPlot('myDiv', [traceNodes, traceEdges], layout);
    </script>
  </body>
</html>

网络的节点是可见的，但边是不可见的。关于如何解决这个问题的建议将会非常有帮助。

JavaScript

来源：https://stackoverflow.com/questions/75383063/plotting-3d-network-graphs-in-plotly

1条答案

按热度按时间

jvlzgdj91#

问题是traceEdges是如何构建的，在每个轴上，应该有一个由空值分隔的（源，目标）坐标列表，即：

x: [source_0.x, target_0.x, null, source_1.x, target_1.x, null, ...]

我们使用空值来正确地将每条边与其他边隔离，并防止将它们链接在一起（我们希望在source_0和target_0之间画一条线，而不是在target_0和source_1之间画一条线）。
因此，我们只需要edge_x、edge_y和edge_z，而不是[xS, xT]、[yS, yT]和[zS, zT]，定义如下：

const edge_x  = [];
const edge_y  = [];
const edge_z  = [];

for (var i = 0; i < edges.length; i++) {
  const a = nodes[edges[i].source];
  const b = nodes[edges[i].target];
  edge_x.push(a.x, b.x, null);
  edge_y.push(a.y, b.y, null);
  edge_z.push(a.z, b.z, null);
}

const traceEdges = {
  x: edge_x,
  y: edge_y,
  z: edge_z,
  type: 'scatter3d',
  mode: 'lines',
  line: { color: 'red', width: 2},
  opacity: 0.8
};

// (rest of the code doesn't change)

下面是输出：

赞(0）回复(0）举报 2023-02-11

我来回答

javascript plotly中绘制三维网络图

1条答案

相关问题

热门标签

最新问答