[BUG]: Polar plot zoom function wipes internal layout settings and incorrect range for dblclick zoomout function
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 18.3k
- 派生
- 2k
- 平均合并
- 2 天 12 小时
- 30 天内合并 PR
- 28
描述
Description
Haven't seen if this is an issue in other plot types, but currently working on a polar plot.
There is a problem when if you initialize a plot with empty traces with autorange: true or with range not specified and then update the data, the zoomout dbl click does not accurately zoom out to the full range of the dataset, it defaults to a range of [0, 1].
Secondly the zoom button from the barmenu will wipe some layout settings of the plot.
For example in a polar plot dragmode: false disable user to rotate the plot. However when the user zooms in,
the user is able to rotate the plot.
The following code snippet will be able to reproduce the above mentioned issues on codepen.
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-3.1.2.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var data = [
{
r: Array(8).fill(0),
// r: [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
name: "11-14 m/s",
marker: { color: "rgb(106,81,163)" },
type: "barpolar"
},
{
// r: [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
r: Array(8).fill(0),
theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
name: "8-11 m/s",
marker: { color: "rgb(158,154,200)" },
type: "barpolar"
},
{
// r: [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
r: Array(8).fill(0),
theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
name: "5-8 m/s",
marker: { color: "rgb(203,201,226)" },
type: "barpolar"
},
{
// r: [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],
r: Array(8).fill(0),
theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
name: "< 5 m/s",
marker: { color: "rgb(242,240,247)" },
type: "barpolar"
}
];
var layout = {
title: {
text: "Wind Speed Distribution in Laurel, NE"
},
font: { size: 16 },
legend: { font: { size: 16 } },
polar: {
radialaxis: {
ticksuffix: "%",
angle: 45
},
angularaxis: {
direction: "clockwise"
}
},
dragmode: false
};
var newData = {
r: [
[77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
[57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
[40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
[20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5]
]
};
const updatedLayout = {
polar: {
radialaxis: {
range: [0, 100] // Update only the radial axis range
}
}
};
Plotly.react("myDiv", data, layout);
Plotly.update("myDiv", newData);
Steps to reproduce
- Plot unable to be rotated
- Click on zoom on plot bar menu
- Select area in plot to zoom in
- Bug reproduced
- Plot able to be rotated
- Double click in plot to zoom out
- Unable to zoom out to full range
- Radial axis range set to [0, 1]
Notes
Also if you use Plotly.update("myDiv", newData), although only range was meant to be set, other radialaxis layout settings was reset from the update
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从使用 Plotly.react 和 Plotly.update 的已提供复现开始,重点关注极坐标图、缩放控件、autorange 以及双击 zoomout。payload 未指出任何仓库文件或测试;完成的标准是保留 dragmode 等布局设置和 radialaxis 配置,并在 zoomout 后恢复完整的数据范围。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript
- 领域
- data-visualization
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100