javascript - 绘图.js : How to avoid overlapping contour lines?

标签 javascript d3.js contour plotly

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

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

A. Conrec.js(这有效,没有重叠)

enter image description here

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

B. Plotly.js(不起作用:重叠轮廓)

enter image description here

示例源代码: 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;
}

最佳答案

使用“smoothing: 0”调整线条选项可以解决此问题:

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

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

关于javascript - 绘图.js : How to avoid overlapping contour lines?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37481973/

相关文章:

javascript - 如果我无权访问,则显示/隐藏按钮

javascript - 显示音频的缓冲百分比

javascript - 使用 D3.csv 在 DC.JS 中加载 CSV 文件

javascript - 在 d3js Linechart 中展开线

jquery - 从 d3.js 中的 Illustrator 导出的 SVG 中选择重复的 ID

Python 从现有列表创建新列表

javascript - 如何在 Reactjs 中将 props 传递给子组件

javascript - JQuery:滚动图像

等高线图中的 Python Matplotlib 非线性缩放

python - 如何使用 python 在 OpenCv 中查找轮廓的颜色