Plotly图形节点自定义值添加失败及点击节点无折线图显示问题

问题场景 #

尝试为Plotly 3D散点图的节点添加自定义value数组，实现点击节点后在右侧面板展示对应折线图。修改pointIndex为pointNumber后，点击节点仍无法在右侧面板显示折线图。

问题原因分析 #

1. 折线图类型错误：右侧面板使用scatter3d类型，但仅传入了x、y轴数据，缺少z轴数据，导致3D图无法正常渲染。
2. CSS布局冲突：父容器.graph-container使用flex布局，但子元素.main-panel和.side-panel设置了float属性，导致右侧面板布局异常，折线图可能被隐藏。
3. 索引依赖风险：通过pointNumber匹配原节点数组索引，若后续节点数据顺序变化，会导致匹配错误。

修复方案 #

1. 修改折线图类型：将右侧折线图改为2D的scatter类型，并设置mode: 'lines+markers'确保显示折线和标记点。
2. 修复布局冲突：移除子元素的float属性，利用flex布局的flex属性分配宽度，保证两个面板正常并排显示。
3. 直接使用customdata：点击事件中直接从data.points[0].customdata获取节点的value数组，无需依赖索引匹配，更可靠。

修复后完整代码 #

<html>
  <head>
    <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
    <style>
      .graph-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
      }

      .main-panel {
        flex: 7;
        margin-right: 10px;
      }

      .side-panel {
        flex: 3;
        background-color: lightgray;
        min-height: 300px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="graph-container">
      <div id="myDiv" class="main-panel"></div>
      <div id="lineGraph" class="side-panel"></div>
    </div>
    <script>
      var nodes = [
        { x: 0, y: 0, z: 0, value: [1, 2, 3] },
        { x: 1, y: 1, z: 1, value: [4, 5, 6] },
        { x: 2, y: 0, z: 2, value: [7, 8, 9] },
        { x: 3, y: 1, z: 3, value: [10, 11, 12] },
        { x: 4, y: 0, z: 4, value: [13, 14, 15] }
      ];

      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 traceNodes = {
        x: x, y: y, z: z,
        mode: 'markers',
        marker: { size: 12, color: 'red' },
        type: 'scatter3d',
        text: [0, 1, 2, 3, 4],
        hoverinfo: 'text',
        hoverlabel: {
          bgcolor: 'white'
        },
        customdata: nodes.map(node => node.value)
      };

      var layout = {
        margin: { l: 0, r: 0, b: 0, t: 0 }
      };

      Plotly.newPlot('myDiv', [traceNodes], layout, { displayModeBar: false });
      const ymax = Math.max(...nodes.map(n => n.value).flat());

      document.getElementById("myDiv").on("plotly_click", function(data){
        // 直接从customdata获取值，无需依赖索引
        var values = data.points[0].customdata;
        console.log(values);

        Plotly.newPlot('lineGraph', [{ 
          x: [0, 1, 2], 
          y: values, 
          type: 'scatter',
          mode: 'lines+markers'
        }], {
          margin: { t: 0 },
          yaxis: {autorange: false, range: [0, ymax + 1]}
        });
      });
    </script>
   </body>
</html>

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