Plotly.js: How to avoid overlapping contour lines?

问题:

Below is an example for creating a contour plot with plotly.js. Some of the contour lines overlap.

How can I alter the plotly settings to avoid that (e.g. increase resolution, switch contouring algorithm)? If I plot the same data using conrec.js the contours do not overlap.

A. Conrec.js (this works, no overlap)

Source code for the example: https://github.com/jasondavies/conrec.js/tree/master/example

B. Plotly.js (does not work: overlapping contours)

Source code for the example: https://jsfiddle.net/jwmdw3o1/

Resources:

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;
}

回答1:

Adapting the line options with "smoothing: 0" resolves this:

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

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