Как получить несколько следов на нескольких смешанных участках в графическом JS? - PullRequest
Новая
       28

Как получить несколько следов на нескольких смешанных участках в графическом JS?

0 голосов
/ 16 июня 2019

Я пишу графики, которые будут отображать движение отслеженных 1-2 рук.
Я хочу отобразить трехмерный кластерный график как один субплот и трехмерный линейный график как второй. Оба этих подзаговора должны иметь несколько трасс (для двух рук).
Кластерный график уже имеет 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.

...