[BUG]: When using scattergl and zooming in significantly, the lines and dots fail to align
未關閉
還沒有人認領這個 Issue。
bug
P3
size: 1
- 主要語言
- JavaScript
- 星號
- 18.3k
- 分支
- 2k
- 平均合併
- 2 天 12 小時
- 30 天內合併 PR
- 28
描述
Description
When using scattergl, I found that if I zoom in too much, the lines and dots do not align properly.
Screenshots/Video
Steps to reproduce
Click the "zoom" function in the toolbox and continuously zoom in on the points until the points and lines are misaligned.
JavaScript
<html>
<head>
<!-- Plotly.js -->
<meta charset="UTF-8" />
<script
src="https://cdn.plot.ly/plotly-3.3.0.min.js"
charset="utf-8"
></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#graphDiv {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="graphDiv"></div>
<script>
const rand = () => Math.random()
var x = [1, 5, 10]
var data = [
{
type: 'scattergl',
mode: 'lines+markers',
line: { color: '#b55400' },
y: [0.000014, 0.000015, 0.000012],
hoverinfo: 'skip',
},
{
type: 'scattergl',
mode: 'lines+markers',
},
]
var layout = {
dragmode: 'pan',
title: { text: '' },
uirevision: 'true',
xaxis: { zeroline: false, tickformat: ',d' },
yaxis: { zeroline: false, tickformat: '.6f', automargin: true },
responsive: true,
}
const graphDiv = document.getElementById('graphDiv')
Plotly.react(graphDiv, data, layout, {
displayModeBar: true,
responsive: true,
})
</script>
</body>
</html>
貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
研究方向
從提供的 JavaScript 重現開始，使用 Plotly.react 和處於 lines+markers 模式的 scattergl trace；反覆放大，觀察線和點何時發生偏離。追蹤 scattergl 的渲染和縮放行為，直到座標處理方式明確，然後驗證在線和標記於極端縮放級別下仍保持對齊。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript
- 領域
- data-visualization
- Issue 類型
- 缺陷
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 活躍度
- 活躍
- 描述清晰度
- 基本清楚
- 新手友好度
- 55/100