更新Plotly标记大小时，我想保留图形填充

如何解决更新Plotly标记大小时，我想保留图形填充

初始标记大小为16。

当我将标记大小更新为30时，图形布局的填充也会更改。

尝试下面的codepn。

var myPlot = document.getElementById('myDiv'),x = [1,2,3,4,5,6],y = [1,4],colors = ['#00000','#00000','#00000'],data = [{x:x,y:y,type:'scatter',mode:'markers',marker:{size:16,color:colors}}],layout = {
        hovermode:'closest',title:'Click on a Point to Change Color<br>Double Click (anywhere) to Change it Back'
     };

Plotly.newPlot('myDiv',data,layout);

myPlot.on('plotly_click',function(data){
  var pn='',tn='',colors=[];
  for(var i=0; i < data.points.length; i++){
    pn = data.points[i].pointNumber;
    tn = data.points[i].curveNumber;
    colors = data.points[i].data.marker.color;
  };
  colors[pn] = '#C54C82';
    
  var update = {'marker':{color: colors,size:30}};
  Plotly.restyle('myDiv',update,[tn]);
});

我可以保留仅改变标记大小的图形布局吗？

解决方法

在布局对象中设置以下内容

    xaxis: {range: [0.5,6.5]}
    yaxis: {range: [0.5,4.5]}

您可以通过获取数据点列表并从此处计算范围来使其动态化。基本上选择一个所需的填充，然后从x和y的第一个元素中减去该填充，然后将填充添加到x和y的最后一个元素中。查看下面的示例，

    let xaxis = { range: [ x[0] - padding,x[x.length - 1] + padding] }
    let yaxis = { range: [ y[0] - padding,y[y.length - 1] + padding] }

资源：https://plotly.com/javascript/axes/#setting-the-range-of-axes-manually

这是一个运行中的示例，其中包含更新的布局对象

var myPlot = document.getElementById('myDiv'),x = [1,2,3,4,5,6],y = [1,4],colors = ['#00000','#00000','#00000'],data = [{x:x,y:y,type:'scatter',mode:'markers',marker:{size:35,color:colors}}],layout = {
        hovermode:'closest',title:'Click on a Point to Change Color<br>Double Click (anywhere) to Change it Back',xaxis: {range: [0.5,6.5]},// Lines added
        yaxis: {range: [0.5,4.5]}   // Lines added
     };

Plotly.newPlot('myDiv',data,layout);

myPlot.on('plotly_click',function(data){
  var pn='',tn='',colors=[];
  for(var i=0; i < data.points.length; i++){
    pn = data.points[i].pointNumber;
    tn = data.points[i].curveNumber;
    colors = data.points[i].data.marker.color;
  };
  colors[pn] = '#C54C82';
    
  var update = {'marker':{color: colors,size:30}};
  Plotly.restyle('myDiv',update,[tn]);
});

myPlot.on('plotly_doubleclick',function(){
  var orgColors = ['#00000','#00000'];
  var update = {'marker':{color: orgColors,size:16}};
  Plotly.restyle('myDiv',update);
});

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

<body>
  
  <div id="myDiv" style="width: 800px; height: 500px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

更新Plotly标记大小时，我想保留图形填充

如何解决更新Plotly标记大小时，我想保留图形填充

解决方法

相关推荐