Plotly.js：如何避免重叠轮廓线？ [英] Plotly.js: How to avoid overlapping contour lines?
本文介绍了Plotly.js：如何避免重叠轮廓线？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是使用plotly.js创建等高线图的示例。某些轮廓线重叠。
如何更改阴谋设置以避免（例如增加分辨率，切换轮廓算法）？如果我使用conrec.js绘制相同的数据，轮廓不重叠。
A。 Conrec.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，
contoururs：{
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;
}
解决方案
平滑：0解析此：
var data = [{
...
line：{
smoothing：0
}
...
}];
https://plot.ly/javascript/reference/#contour-line
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;
}
解决方案
Adapting the line options with "smoothing: 0" resolves this:
var data = [ {
...
line: {
smoothing: 0
}
...
}];
https://plot.ly/javascript/reference/#contour-line
这篇关于Plotly.js：如何避免重叠轮廓线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
