Plotly：当绘制了(n)个点时，标记会消失

Question

好的，我的初始想法是在plotly中制作一条折线图，并在特定阈值t后用一种颜色着色，而在阈值之前则用另一种颜色着色。这个方法可以处理23个或更少的点，但对于更多的点，则无法使用此方法：

import numpy as np
import plotly.graph_objects as go

X = [j for j in range(0, 100)]
Y = [j for j in range(100000, 200000, 1000)]
X = X[:23]
Y = Y[:23]
X = np.array(X)
Y = np.array(Y)
t = 4

x = X[X <= t]  # Include the threshold
y = Y[X <= t]
bx = X[X >= t]
by = Y[X >= t]

fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y, line=dict(width=4, color='grey'), name="useless data"))
fig.add_trace(go.Scatter(x=bx, y=by, line=dict(width=4, color='blue'), name="useful data"))
fig.update_layout(xaxis_title="x axis", yaxis_title="y axis")
fig.show()

这段代码正常运行，如果你运行它，你会看到数字4包含在蓝色点中。但是，现在请移除只取23个值的语句(X = X[:23], Y = Y[:23])。你会发现数字4不再是蓝色点的一部分，此外，蓝线上的点也消失了，你可以悬停查看数据，但是无法看到实际的点！如果有人知道为什么会发生这种情况，请告诉我，这是一个实际的错误还是正常的行为，有什么我忽略了的东西？谢谢您提前的帮助！

- Petar

Answer 1

问题？不一定。奇怪的行为？也许是...

无论如何，您的情况下的解决方案是：

fig.data[1].mode = 'lines+markers'

---

你在这里遇到的问题是由两个因素导致的：

1. 当鼠标悬停在一个点上时，如果有一条线和一个标记表示的轨迹，则plotly将显示标记的信息，即使线被放置在顶部。
2. 对于递增的go.Scatter()跟踪长度，plotly将在达到某个阈值后停止显示标记。
3. 这可能是令人感到奇怪的部分; 精确的阈值似乎不仅取决于跟踪本身的长度。 我们最后来看一下这个问题。

---

细节:

---

1. 悬停行为

按照原始代码运行程序，然后将鼠标悬停在4上：

现在通过单击图例中的名称取消选择useless data，您将得到：

如果您稍微缩小一下，就会发现数据实际上存在，只是在同时激活两条跟踪时不会显示悬停信息：

所以，该怎么办？

只需包含：

fig.data[1].mode = 'lines+markers'

获得：

2. go.Scatter的标记触发阈值

在您的情况下，这个阈值似乎是长度为23的轨迹，因为您看到了您描述的确切行为。那么，这有什么奇怪之处吗？接下来的部分：

3. 可变的标记触发阈值

首先，*为什么会有一个阈值？可能是因为具有太多标记的轨迹看起来令人困惑：

您发现阈值为24。但是在仅使用 go.Figure(go.Scatter(x = x, y = y)) 构建的图中，阈值为20：

pts = 20
x = np.arange(1,pts)
y = np.arange(1,pts)
fig = go.Figure(go.Scatter(x = x, y = y)).show()

pts = 21
x = np.arange(1,pts)
y = np.arange(1,pts)
fig = go.Figure(go.Scatter(x = x, y = y)).show()

但我不确定为什么。但我认为这本身就是一个很好的问题。

- vestland

---

厉害了，你们思维高度一致，只相差几秒钟。干得好，伙计，非常扎实的努力和解释。（+1） - S3DEV

@S3DEV 同样！ - vestland

非常有用的答案！它为我节省了很多时间！感谢您和S3DEV帮助我！真的非常感激，祝您有美好的一天！ - Petar

Answer 2

原因：

这是Plotly散点图的“特性”。当绘制了一定数量的点时，底层的Plotly逻辑会将“散点”图转换为“线”图，以提高渲染效率和可视化效果。因此，标记会被转换为实心的线条。

解决方法：

只需在追踪线中添加 mode='lines+markers'。

完整工作示例：

这是您的源代码，在上述小修复的基础上：

import numpy as np
import plotly.graph_objects as go

X = [j for j in range(0, 100)]
Y = [j for j in range(100000, 200000, 1000)]
#X = X[:23]
#Y = Y[:23]
X = np.array(X)
Y = np.array(Y)
t = 4

x = X[X <= t]  # Include the threshold
y = Y[X <= t]
bx = X[X >= t]
by = Y[X >= t]

fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y, mode='lines+markers', line=dict(width=1, color='grey'), name="useless data"))
fig.add_trace(go.Scatter(x=bx, y=by, mode='lines+markers', line=dict(width=1, color='blue'), name="useful data"))
fig.update_layout(xaxis_title="x axis", yaxis_title="y axis")
fig.show()

输出：

- S3DEV

---

不错的 (+1) 你比我快了大约45秒 =D - vestland

非常有用的答案！它为我节省了很多时间！感谢您和vestland帮助我！真的非常感激，祝您有美好的一天！ :) - Petar

@Petar - 很高兴听到它对你有帮助，我很荣幸。 - S3DEV