Plotly.js: How to avoid overlapping contour lines?(Plotly.js:如何避免重叠的轮廓线?)
本文介绍了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);变量数据 = [ {z:z数据，x:x数据，y:y数据，类型:'轮廓'，色阶:'喷射'，演出规模:假，自动轮廓:假，轮廓:{开始:-5，结束:3，尺寸:0.5}}];可变布局 = {利润: {乙:0，升:0，r: 0,时间:0},身高:600，宽度:600，标题: ''，坐标轴:{滴答声:''，showticklabels: 假},y轴:{滴答声:''，showticklabels: 假}};Plotly.newPlot('graph', data, layout, {displayModeBar: false});函数创建数据(){变量数据 = [[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]];返回数据；} 解决方案
使用 "smoothing: 0" 调整行选项可解决此问题:
var data = [ {...线: {平滑: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:如何避免重叠的轮廓线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
沃梦达教程
本文标题为：Plotly.js:如何避免重叠的轮廓线?
基础教程推荐
猜你喜欢
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体？ 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块，而不捆绑我的代码吗？ 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
