无法通过设置标记类型来扩展迹线答案

【问题标题】：Can't extend traces with setting the marker type无法通过设置标记类型来扩展迹线
【发布时间】：2021-03-17 05:47:59
【问题描述】：

通过下面的代码，我正在尝试创建一个简单的气泡图。我创建一个跟踪以稍后扩展它：

    var t9 = {
        x: [100821],
        y: [11],
        name: 'Some text',
        text: ['Some text'],
        mode: ['markers'],
        marker: [{
          size: [1531*10],
          sizeref: 2,
          sizemode: 'area'
        }]
      };
    var data = [t9];


var layout = {
  title: 'Chart',
  showlegend: true,
  xaxis: {
    title: 'Some text'
  },
  yaxis: {
    title: 'Some text'
  }
};

var config = {responsive: true}

Plotly.newPlot('plot', data, layout, config);



        Plotly.extendTraces(
          'plot', 
        {
          x: [[5491]],
          y: [[5]],
          text: [['Some text']],
          mode: [['markers']],
          marker: [[{
            size: 123*100,
            sizeref: 2,
            sizemode: 'area'
          }]]
        }, [0]);

        

        Plotly.extendTraces(
          'plot', 
        {
          x: [[60022]],
          y: [[11]],
          text: [['Some text']],
          mode: [['markers']],
          marker: [[{
            size: 982*100,
            sizeref: 2,
            sizemode: 'area'
          }]]
        }, [0]);

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<html>
  <body>
    <div id="plot"></div>
  </body>
</html>

结果是这样的：

如您所见，标记不会占用mode: ['markers'] 属性和所有markers: 属性。

知道如何在此页面上获得类似的结果吗？ https://plotly.com/javascript/bubble-charts/

【问题讨论】：

标签： javascript plotly marker extend area

【解决方案1】：

如果您使用extendTraces 并想更新属性，例如标记大小，您需要将属性作为字符串提供，例如marker.size 并且值必须是一个数组，就像你的新 x 和 y 值一样。
```
Plotly.extendTraces(
  'plot', 
  {
    x: [[5491]],
    y: [[5]],
    'marker.size':[[40*100]]
  }, [0]);
```

您的初始数据和属性应该是一个简单的数组或对象，而不是数组/对象的数组。

 var t9 = {
  x: [100821],
  y: [11],
  name: 'Some text',
  text: 'Some text',
  mode: 'markers',
  marker: {
    size: [15*100],
    sizeref: 1,
    sizemode: 'area'
  }
};

var data = [t9];

var layout = {
  title: 'Chart',
  showlegend: true,
  xaxis: {
    title: 'Some text'
  },
  yaxis: {
    title: 'Some text',
    range: [-12, 30]
  }
};

var config = {responsive: true}

Plotly.newPlot('plot', data, layout, config);


Plotly.extendTraces(
  'plot', 
  {
    x: [[5491]],
    y: [[5]],
    'marker.size':[[40*100]]
  }, [0]);

Plotly.extendTraces(
  'plot', 
  {
    x: [[60022]],
    y: [[11]],
   'marker.size':[[200*100]] 
  }, [0]);

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id='plot'>

</div>

【讨论】：