如何在密谋JS的多重混合子图中获得多条迹线?

时间:2019-06-16 14:07:35

标签: javascript plot plotly trace subplot

我正在编写图表,以显示被跟踪的1-2手的运动。
我想将3D群集图显示为一个子图,将3D线图显示为第二个子图。这两个子图都需要有几条痕迹(两只手)。
默认情况下,群集图已经有2条迹线,一条迹线为点,一条迹线为云,但是如果双手被跟踪,则可能有4条迹线。 线图具有1条或2条迹线。

我的集群图数据如下:

var data = [
    //cluster points 
    {
        name:"Left Hand",
        x: x,
        y: y,
        z: z,
        mode: 'markers',
        type: 'scatter3d',
        marker: {
          color: 'blue',
          size: 3
        }
    },
    //cluster background
    {
        //how close points need to be to be together in a cluster
        //higher=closer
        alphahull: 13,
        opacity: 0.1,
        type: 'mesh3d',
        x: x,
        y: y,
        z: z
    },
    {
        name:"Right Hand",
        x: x1,
        y: y1,
        z: z1,
        mode: 'markers',
        type: 'scatter3d',
        marker: {
          color: 'red',
          size: 3
        }
    },
    //cluster background
    {
        //how close points need to be to be together in a cluster
        //higher=closer
        alphahull: 13,
        opacity: 0.1,
        type: 'mesh3d',
        x: x1,
        y: y1,
        z: z1
    }];

我的线图数据如下:

var data2 = [{
      type: 'scatter3d',
      mode: 'lines',
      name:"Left Hand",
      x: x,
      y: y,
      z: z,
      opacity: 1,
      line: {
        width: 6,
        reversescale: false
      }
    },{
      type: 'scatter3d',
      mode: 'lines',
      name:"Right Hand",
      x: x1,
      y: y1,
      z: z1,
      opacity: 1,
      line: {
        width: 6,
        color: "red",
        reversescale: false
      }
    }];

如果我将两者都这样组合:

Plotly.plot("div" + i + "2", [data, data2], lineLayout);

什么也没发生(我猜想是因为嵌套[]对于绘制来说并不酷)。

数据本身是正确的,因为如果不使用子图,我可以将其绘制得很好。

但是我想使用子图,因为我想显示很多图。太多会导致其中一些再次消失,因为一个页面上只能同时有16个WEB-GL实例。因此,我想创建子图,将实例数减少一半。这也是有道理的,因为群集图和线图始终属于彼此。

如果有人可以回答我如何将我的数据变量合并在一起以使它们以图方式接受它们,或者如何向JS中的特定子图添加迹线,我将不胜感激。

0 个答案:

没有答案