Plotly.js绘制3D网络图节点可见边不显示的修复建议求助

你的代码里节点能正常显示，但边无法渲染的核心原因是边的坐标数组格式不符合Plotly scatter3d的线条绘制要求。Plotly绘制多条独立线段时，需要将每条线段的起点、终点坐标依次放入数组，并用null分隔不同线段，而不是把所有起点和终点分成两组数组。

修复步骤： #

• 重构边的坐标收集逻辑，将每条边的起点和终点坐标依次存入数组，每条边结束后添加null作为分隔符
• 调整traceEdges的x/y/z参数为处理后的一维数组

修复后的完整代码： #

<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);
      }

      // 重构边的坐标数组：每条边的起点+终点+null分隔
      var xEdges = [];
      var yEdges = [];
      var zEdges = [];

      for (var i = 0; i < edges.length; i++) {
        var source = nodes[edges[i].source];
        var target = nodes[edges[i].target];
        // 添加起点坐标
        xEdges.push(source.x);
        yEdges.push(source.y);
        zEdges.push(source.z);
        // 添加终点坐标
        xEdges.push(target.x);
        yEdges.push(target.y);
        zEdges.push(target.z);
        // 添加null分隔不同线段
        xEdges.push(null);
        yEdges.push(null);
        zEdges.push(null);
      }

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

      var traceEdges = {
        x: xEdges,
        y: yEdges,
        z: zEdges,
        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>

关键说明： #

原来的x: [xS, xT]这种二维数组格式，Plotly无法识别为多条线段。改用一维数组+null分隔的方式后，Plotly会自动将每两个null之间的坐标识别为一条独立的边，这样就能正常渲染出所有连接线了。

内容的提问来源于stack exchange，提问作者Natasha