猿问

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

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


    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/


慕的地6264312
浏览 88回答 1
1回答

慕侠2389804

如果您使用extendTraces并想要更新属性，例如标记大小，您需要以字符串形式提供属性，例如，marker.size并且值必须是数组，就像新的 x 和 y 值一样。Plotly.extendTraces(&nbsp; 'plot',&nbsp;&nbsp; {&nbsp; &nbsp; x: [[5491]],&nbsp; &nbsp; y: [[5]],&nbsp; &nbsp; 'marker.size':[[40*100]]&nbsp; }, [0]);您的初始数据和属性应该是一个简单的数组或对象，而不是数组/对象的数组。&nbsp;var t9 = {&nbsp; x: [100821],&nbsp; y: [11],&nbsp; name: 'Some text',&nbsp; text: 'Some text',&nbsp; mode: 'markers',&nbsp; marker: {&nbsp; &nbsp; size: [15*100],&nbsp; &nbsp; sizeref: 1,&nbsp; &nbsp; sizemode: 'area'&nbsp; }};var data = [t9];var layout = {&nbsp; title: 'Chart',&nbsp; showlegend: true,&nbsp; xaxis: {&nbsp; &nbsp; title: 'Some text'&nbsp; },&nbsp; yaxis: {&nbsp; &nbsp; title: 'Some text',&nbsp; &nbsp; range: [-12, 30]&nbsp; }};var config = {responsive: true}Plotly.newPlot('plot', data, layout, config);Plotly.extendTraces(&nbsp; 'plot',&nbsp;&nbsp; {&nbsp; &nbsp; x: [[5491]],&nbsp; &nbsp; y: [[5]],&nbsp; &nbsp; 'marker.size':[[40*100]]&nbsp; }, [0]);Plotly.extendTraces(&nbsp; 'plot',&nbsp;&nbsp; {&nbsp; &nbsp; x: [[60022]],&nbsp; &nbsp; y: [[11]],&nbsp; &nbsp;'marker.size':[[200*100]]&nbsp;&nbsp; }, [0]);<head>&nbsp; <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><div id='plot'></div>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答