Plotly restyle 更新错误

Question

我正在尝试更新我的绘图。

以下是我尝试过的方法。

这是我的数据集

  var scatter_data = [{
  "product_id": 1,
  "color": "#ff0000",
  "text": "Size :14",
  "y": 4,
  "x": 6,
  "z": 3,
  "size": 14
  }, {
  "product_id": 2,
  "color": "#FFFFFF",
  "text": "Size :38",
  "y": 5,
  "x": 4,
  "z": 4,
  "size": 38
  }, {
  "product_id": 3,
  "color": "#00ff00",
  "text": "Size :20",
  "y": 3,
  "x": 5,
  "z": 4,
  "size": 20
  }, {
  "product_id": 4,
  "color": "#FFFFFF",
  "text": "Size :31",
  "y": 6,
  "x": 0,
  "z": 1,
  "size": 31
  }, {
  "product_id": 5,
  "color": "#00ff00",
  "text": "Size :20",
  "y": 0,
  "x": 5,
  "z": 1,
  "size": 20
  }, {
  "product_id": 6,
  "color": "#ff0000",
  "text": "Size :18",
  "y": 6,
  "x": 1,
  "z": 5,
  "size": 18
  }, {
  "product_id": 7,
  "color": "#FFa500",
  "text": "Size :15",
  "y": 0,
  "x": 4,
  "z": 2,
  "size": 15
  }, {
  "product_id": 8,
  "color": "#00ff00",
  "text": "Size :13",
  "y": 2,
  "x": 1,
  "z": 1,
  "size": 13
  }, {
  "product_id": 9,
  "color": "#FFFFFF",
  "text": "Size :11",
  "y": 3,
  "x": 0,
  "z": 1,
  "size": 11
  }, {
  "product_id": 10,
  "color": "#FFa500",
  "text": "Size :32",
  "y": 4,
  "x": 2,
  "z": 2,
  "size": 32
  }, {
  "product_id": 11,
  "color": "#0000ff",
  "text": "Size :30",
  "y": 1,
  "x": 0,
  "z": 1,
  "size": 30
  }, {
  "product_id": 12,
  "color": "#0000ff",
  "text": "Size :39",
  "y": 3,
  "x": 4,
  "z": 3,
  "size": 39
   }, {
  "product_id": 13,
  "color": "#FFFFFF",
  "text": "Size :33",
  "y": 2,
  "x": 2,
  "z": 4,
  "size": 33
  }, {
  "product_id": 14,
  "color": "#ff69b4",
  "text": "Size :21",
  "y": 0,
  "x": 6,
  "z": 6,
  "size": 21
  }, {
  "product_id": 15,
  "color": "#FFa500",
  "text": "Size :34",
  "y": 4,
  "x": 4,
  "z": 2,
  "size": 34
   }, {
  "product_id": 16,
  "color": "#FFa500",
  "text": "Size :28",
  "y": 0,
  "x": 0,
  "z": 2,
  "size": 28
  }, {
  "product_id": 17,
  "color": "#ff69b4",
  "text": "Size :10",
  "y": 1,
  "x": 3,
  "z": 1,
    "size": 10
  }, {
  "product_id": 18,
  "color": "#00ff00",
  "text": "Size :21",
  "y": 0,
  "x": 5,
  "z": 2,
  "size": 21
  }, {
  "product_id": 19,
  "color": "#ff0000",
  "text": "Size :32",
  "y": 6,
  "x": 6,
  "z": 4,
  "size": 32
  }, {
  "product_id": 20,
  "color": "#FFa500",
  "text": "Size :16",
  "y": 0,
  "x": 6,
  "z": 1,
  "size": 16
  }, {
  "product_id": 21,
  "color": "#0000ff",
  "text": "Size :39",
  "y": 1,
  "x": 4,
  "z": 2,
  "size": 39
  }, {
  "product_id": 22,
  "color": "#FFa500",
  "text": "Size :24",
  "y": 2,
  "x": 4,
  "z": 4,
  "size": 24
  }, {
  "product_id": 23,
  "color": "#0000ff",
  "text": "Size :25",
  "y": 5,
  "x": 1,
  "z": 0,
  "size": 25
  }, {
  "product_id": 24,
  "color": "#FFFFFF",
  "text": "Size :35",
  "y": 0,
  "x": 6,
  "z": 4,
  "size": 35
  }, {
  "product_id": 25,
  "color": "#ff0000",
  "text": "Size :29",
  "y": 4,
  "x": 2,
  "z": 0,
  "size": 29
  }, {
  "product_id": 26,
  "color": "#FFa500",
  "text": "Size :26",
  "y": 2,
  "x": 0,
  "z": 3,
  "size": 26
  }, {
  "product_id": 27,
  "color": "#0000ff",
  "text": "Size :27",
  "y": 2,
  "x": 5,
  "z": 5,
   "size": 27
  }, {
  "product_id": 28,
  "color": "#ff0000",
  "text": "Size :15",
  "y": 2,
  "x": 5,
  "z": 2,
  "size": 15
  }, {
  "product_id": 29,
  "color": "#ff69b4",
  "text": "Size :27",
  "y": 3,
  "x": 1,
  "z": 4,
  "size": 27
  }, {
  "product_id": 30,
  "color": "#FFFFFF",
  "text": "Size :16",
  "y": 5,
  "x": 6,
  "z": 5,
  "size": 16
  }, {
  "product_id": 31,
  "color": "#00ff00",
  "text": "Size :24",
  "y": 4,
  "x": 5,
  "z": 6,
   "size": 24
  }, {
  "product_id": 32,
  "color": "#FFa500",
  "text": "Size :22",
  "y": 5,
  "x": 6,
  "z": 6,
  "size": 22
  }, {
  "product_id": 33,
  "color": "#ff0000",
  "text": "Size :12",
  "y": 4,
  "x": 0,
  "z": 4,
  "size": 12
  }, {
  "product_id": 34,
  "color": "#ff0000",
  "text": "Size :33",
  "y": 0,
  "x": 3,
  "z": 1,
  "size": 33
  }, {
  "product_id": 35,
  "color": "#FFa500",
  "text": "Size :16",
  "y": 0,
  "x": 0,
  "z": 1,
  "size": 16
  }, {
  "product_id": 36,
  "color": "#00ff00",
  "text": "Size :32",
  "y": 2,
  "x": 5,
  "z": 2,
  "size": 32
  }, {
  "product_id": 37,
  "color": "#ff0000",
  "text": "Size :27",
  "y": 2,
  "x": 6,
  "z": 6,
  "size": 27
  }, {
  "product_id": 38,
  "color": "#FFFFFF",
  "text": "Size :20",
  "y": 3,
  "x": 4,
  "z": 0,
  "size": 20
  }, {
  "product_id": 39,
  "color": "#FFa500",
  "text": "Size :27",
  "y": 6,
  "x": 0,
  "z": 3,
  "size": 27
  }, {
  "product_id": 40,
  "color": "#FFFFFF",
  "text": "Size :16",
  "y": 1,
  "x": 3,
  "z": 3,
  "size": 16
  }, {
  "product_id": 41,
  "color": "#0000ff",
  "text": "Size :29",
  "y": 2,
  "x": 2,
  "z": 0,
  "size": 29
  }, {
  "product_id": 42,
  "color": "#ff69b4",
  "text": "Size :23",
  "y": 6,
  "x": 2,
  "z": 3,
  "size": 23
  }, {
  "product_id": 43,
  "color": "#00ff00",
  "text": "Size :10",
  "y": 3,
  "x": 1,
  "z": 5,
  "size": 10
  }, {
  "product_id": 44,
  "color": "#FFa500",
  "text": "Size :35",
  "y": 0,
  "x": 2,
  "z": 4,
  "size": 35
   }, {
  "product_id": 45,
  "color": "#FFFFFF",
  "text": "Size :21",
  "y": 3,
  "x": 3,
  "z": 6,
  "size": 21
  }, {
  "product_id": 46,
  "color": "#FFa500",
  "text": "Size :32",
  "y": 2,
  "x": 0,
  "z": 6,
  "size": 32
  }, {
  "product_id": 47,
  "color": "#ff0000",
  "text": "Size :24",
  "y": 5,
  "x": 6,
  "z": 3,
  "size": 24
   }, {
  "product_id": 48,
  "color": "#FFFFFF",
  "text": "Size :30",
  "y": 0,
  "x": 1,
  "z": 6,
  "size": 30
  }, {
  "product_id": 49,
  "color": "#ff69b4",
  "text": "Size :33",
  "y": 3,
  "x": 5,
  "z": 5,
  "size": 33
  }, {
  "product_id": 50,
  "color": "#ff0000",
  "text": "Size :10",
  "y": 1,
  "x": 3,
  "z": 1,
  "size": 10
  }]

1) 这是我用来创建图表的代码

    $(document).ready(function(){
   trace = [];
   data = []
    $.each(scatter_data, function(index, value){
              // console.log("here"+value);
              index ++;
                trace[index] = {
                    x : [value.x],
                    y: [value.y],
                    z:[value.z],
                    text:["Size: "+value.size],
                    mode : 'markers',
                    marker : {
                      color : [value.color],
                      size : [value.size],
                      symbol : 'circle',
                      line: {
                        color : 'rgb(204,204,204)',
                        width:1
                      },
                      opacity:0.9,
                    },
                    type: 'scatter3d',
                    name : 'category'+index,
                    title: 'title'+index
                };
                console.log(trace[index]);
                data.push(trace[index]);
              });
              // var data = [trace[1],trace[2],trace[3]];
              var layout = {margin: {
                 l: 0,
                 r: 0,
                 b: 0,
                t: 0
               }, showlegend : true};
               Plotly.newPlot('plotly-div', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false } );

              //  There exist a event to click on the data point
              //  var graphDiv = document.getElementById('plotly-div')
              //  graphDiv.on('plotly_click', function(data){
              //     // do something using the event data
              //     console.log(data);
              //   });

});

现在我有一个表单，我可以通过它编辑数据并获取该数据来更新图表。

  for(i=1;i<=50;i++){
    trace_no.push(i);
    tempx.push($("#x-"+i).val());
    tempy.push($("#y-"+i).val());
    tempz.push($("#z-"+i).val());
    tempsize.push($("#size-"+i).val());
    tempcolor.push($("#rgb-combined-"+i).spectrum('get').toHexString());
    temptext.push("size : "+$("#size-"+i).val());
  }


  var update = {
      x : [tempx],
      y : [tempy],
      z : [tempz],
      size : [tempsize],
      'marker.color' : [tempcolor],
      text : [temptext]
  }

 Plotly.restyle('plotly-div', update, trace_no)

图表未反映变化，而且所有图例都以 1 种特定颜色着色

提前致谢！

Answer 1

所以我终于在图书馆作者的帮助下找到了解决这个问题的方法。

正确的语法是：

var update = {
      x : [[1],[2],[3],[4],[5]],
      y : [[1],[2],[3],[4],[5]],
      z : [[1],[2],[3],[4],[5]],
      size :[[12],[13],[14],[15],[16]],
      'marker.color' : [["#001"],["#005"],["#0f0"],["#f00"],["#00f"]],
       text : "size"
  }
   Plotly.restyle('myDiv', update, [0,1,2,3,4]);

必须为每条轨迹指定一个单独的数组。

Plotly restyle 更新错误

Plotly restyle update error

javascript

plotly