Plotly.js: 如何避免轮廓线重叠？

Question

下面是使用 plotly.js 创建等高线图的示例。一些 轮廓线重叠 。

如何更改绘图设置以避免这种情况（例如增加 分辨率、切换 轮廓算法）？如果我使用 conrec.js 绘制相同的数据，则轮廓不会重叠。

一个。 Conrec.js（有效，无重叠）

例子的源代码： https://github.com/jasondavies/conrec.js/tree/master/example

乙。 Plotly.js（不起作用：轮廓重叠）

例子的源代码： https://jsfiddle.net/jwmdw3o1/

资源：

https://cdn.plot.ly/plotly-latest.min.js

https://github.com/mbostock/d3/raw/v1.10.1/d3.js

Html:

<div id="graph"></div>

JavaScript:

var zData = createData();
var xData = d3.range(0, zData.length);
var yData = d3.range(0, zData[0].length);

var data = [ {
  z: zData,
  x: xData,
  y: yData,
  type: 'contour',  
  colorscale: 'Jet',
  showscale: false,
  autocontour: false,  
  contours: {
    start: -5,
    end: 3,
    size: 0.5
  }
}];

var layout = {
margin: {
b: 0,
l: 0,
r: 0,
t: 0
},
height: 600,
width: 600,
  title: '',
  xaxis: {
        ticks: '',
      showticklabels: false  

  },
  yaxis: {
       ticks: '',
       showticklabels: false     
  } 
};

Plotly.newPlot('graph', data, layout, {displayModeBar: false});

function createData(){
var data = [
  [
    0.4, 
    0.4, 
    0.7, 
    -1.0, 
    -0.1, 
    0.6, 
    -0.4, 
    0.6, 
    -0.4, 
    1.3, 
    0.7, 
    -0.4, 
    1.1, 
    1.3, 
    0.6, 
    0.1, 
    -0.0, 
    -0.8, 
    -0.8, 
    -1.0
  ], 
  [
    0.4, 
    -0.4, 
    0.4, 
    -1.2, 
    -0.7, 
    0.4, 
    -0.9, 
    0.5, 
    -0.9, 
    1.2, 
    0.5, 
    -1.0, 
    1.3, 
    1.1, 
    0.5, 
    -0.0, 
    -0.1, 
    -1.2, 
    -1.0, 
    -0.9
  ], 
  [
    0.7, 
    0.4, 
    0.1, 
    -1.2, 
    -0.2, 
    0.5, 
    -0.6, 
    0.6, 
    -0.2, 
    0.9, 
    0.6, 
    -0.5, 
    1.1, 
    0.8, 
    0.6, 
    0.1, 
    -0.4, 
    -0.9, 
    -0.7, 
    -0.8
  ], 
  [
    -1.0, 
    -1.2, 
    -1.2, 
    -4.4, 
    -1.9, 
    -0.8, 
    -2.2, 
    -1.0, 
    -2.2, 
    0.0, 
    -0.3, 
    -2.0, 
    -0.2, 
    0.2, 
    -0.8, 
    -1.6, 
    -1.9, 
    -2.4, 
    -2.3, 
    -2.6
  ], 
  [
    -0.1, 
    -0.7, 
    -0.2, 
    -1.9, 
    -2.0, 
    -0.5, 
    -1.9, 
    -0.3, 
    -1.7, 
    0.4, 
    -0.2, 
    -1.9, 
    0.3, 
    0.4, 
    -0.3, 
    -0.8, 
    -0.9, 
    -2.1, 
    -1.8, 
    -2.0
  ], 
  [
    0.6, 
    0.4, 
    0.5, 
    -0.8, 
    -0.5, 
    -0.1, 
    -0.8, 
    0.6, 
    -0.5, 
    1.0, 
    0.5, 
    -0.7, 
    0.8, 
    1.0, 
    0.5, 
    0.1, 
    -0.3, 
    -0.9, 
    -0.7, 
    -1.1
  ], 
  [
    -0.4, 
    -0.9, 
    -0.6, 
    -2.2, 
    -1.9, 
    -0.8, 
    -2.7, 
    -0.6, 
    -2.0, 
    0.3, 
    -0.3, 
    -2.3, 
    -0.0, 
    -0.0, 
    -0.6, 
    -1.1, 
    -1.3, 
    -2.4, 
    -2.0, 
    -2.2
  ], 
  [
    0.6, 
    0.5, 
    0.6, 
    -1.0, 
    -0.3, 
    0.6, 
    -0.6, 
    0.1, 
    -0.8, 
    1.3, 
    0.8, 
    -0.8, 
    1.1, 
    1.3, 
    0.4, 
    0.1, 
    0.1, 
    -0.8, 
    -1.0, 
    -1.0
  ], 
  [
    -0.4, 
    -0.9, 
    -0.2, 
    -2.2, 
    -1.7, 
    -0.5, 
    -2.0, 
    -0.8, 
    -2.9, 
    0.3, 
    -0.4, 
    -2.2, 
    -0.0, 
    -0.0, 
    -0.7, 
    -0.7, 
    -1.3, 
    -2.4, 
    -2.1, 
    -2.6
  ], 
  [
    1.3, 
    1.2, 
    0.9, 
    0.0, 
    0.4, 
    1.0, 
    0.3, 
    1.3, 
    0.3, 
    1.1, 
    1.0, 
    0.2, 
    0.7, 
    1.9, 
    0.9, 
    -0.2, 
    0.3, 
    0.1, 
    -0.4, 
    -0.2
  ], 
  [
    0.7, 
    0.5, 
    0.6, 
    -0.3, 
    -0.2, 
    0.5, 
    -0.3, 
    0.8, 
    -0.4, 
    1.0, 
    0.3, 
    -0.3, 
    1.0, 
    1.1, 
    0.6, 
    0.1, 
    0.3, 
    -0.7, 
    -0.5, 
    -0.6
  ], 
  [
    -0.4, 
    -1.0, 
    -0.5, 
    -2.0, 
    -1.9, 
    -0.7, 
    -2.3, 
    -0.8, 
    -2.2, 
    0.2, 
    -0.3, 
    -2.7, 
    0.0, 
    -0.0, 
    -0.6, 
    -1.0, 
    -1.1, 
    -2.3, 
    -2.1, 
    -2.4
  ], 
  [
    1.1, 
    1.3, 
    1.1, 
    -0.2, 
    0.3, 
    0.8, 
    -0.0, 
    1.1, 
    -0.0, 
    0.7, 
    1.0, 
    0.0, 
    1.6, 
    0.8, 
    1.0, 
    0.8, 
    0.7, 
    -0.2, 
    -0.2, 
    -0.2
  ], 
  [
    1.3, 
    1.1, 
    0.8, 
    0.2, 
    0.4, 
    1.0, 
    -0.0, 
    1.3, 
    -0.0, 
    1.9, 
    1.1, 
    -0.0, 
    0.8, 
    1.2, 
    1.1, 
    0.0, 
    0.2, 
    -0.1, 
    -0.4, 
    0.0
  ], 
  [
    0.6, 
    0.5, 
    0.6, 
    -0.8, 
    -0.3, 
    0.5, 
    -0.6, 
    0.4, 
    -0.7, 
    0.9, 
    0.6, 
    -0.6, 
    1.0, 
    1.1, 
    -0.2, 
    0.1, 
    -0.0, 
    -0.9, 
    -0.6, 
    -1.2
  ], 
  [
    0.1, 
    -0.0, 
    0.1, 
    -1.6, 
    -0.8, 
    0.1, 
    -1.1, 
    0.1, 
    -0.7, 
    -0.2, 
    0.1, 
    -1.0, 
    0.8, 
    0.0, 
    0.1, 
    -0.6, 
    -0.4, 
    -1.2, 
    -1.3, 
    -1.4
  ], 
  [
    -0.0, 
    -0.1, 
    -0.4, 
    -1.9, 
    -0.9, 
    -0.3, 
    -1.3, 
    0.1, 
    -1.3, 
    0.3, 
    0.3, 
    -1.1, 
    0.7, 
    0.2, 
    -0.0, 
    -0.4, 
    -1.3, 
    -1.4, 
    -1.6, 
    -1.9
  ], 
  [
    -0.8, 
    -1.2, 
    -0.9, 
    -2.4, 
    -2.1, 
    -0.9, 
    -2.4, 
    -0.8, 
    -2.4, 
    0.1, 
    -0.7, 
    -2.3, 
    -0.2, 
    -0.1, 
    -0.9, 
    -1.2, 
    -1.4, 
    -3.0, 
    -2.3, 
    -2.5
  ], 
  [
    -0.8, 
    -1.0, 
    -0.7, 
    -2.3, 
    -1.8, 
    -0.7, 
    -2.0, 
    -1.0, 
    -2.1, 
    -0.4, 
    -0.5, 
    -2.1, 
    -0.2, 
    -0.4, 
    -0.6, 
    -1.3, 
    -1.6, 
    -2.3, 
    -2.3, 
    -2.4
  ], 
  [
    -1.0, 
    -0.9, 
    -0.8, 
    -2.6, 
    -2.0, 
    -1.1, 
    -2.2, 
    -1.0, 
    -2.6, 
    -0.2, 
    -0.6, 
    -2.4, 
    -0.2, 
    0.0, 
    -1.2, 
    -1.4, 
    -1.9, 
    -2.5, 
    -2.4, 
    -3.3
  ]
];
return data;
}

Answer 1

使用 "smoothing: 0" 调整行选项可解决此问题：

var data = [ {
 ...
  line: {   
    smoothing: 0    
  }
  ...
}];

https://plot.ly/javascript/reference/#contour-line

Plotly.js: 如何避免轮廓线重叠？

Plotly.js: How to avoid overlapping contour lines?

javascript

d3.js

contour

plotly