Matplotlib与mpld3绘图缩放后标记尺寸差异问题及解决方法

我编写了如下最小可复现代码：

import pandas as pd
import matplotlib.pyplot as plt
import numpy as np
import mpld3

# Create a DataFrame with columns id, X, and Y
# num_points = 100
# t = np.linspace(0, 4 * np.pi, num_points)
# data = {'id': range(1, num_points + 1), 'X': 10 * np.cos(t), 'Y': 5 * np.sin(t)}  # Adjust amplitude and frequency as needed
# df = pd.DataFrame(data)

num_points = 25000
t = np.linspace(0, 8 * np.pi, num_points)  # Adjust the range to control the length of the trajectory
data = {'id': range(1, num_points + 1), 'X': 10 * np.cos(t), 'Y': 5 * np.sin(t)}  # Adjust amplitude and frequency as needed
df = pd.DataFrame(data)


# Set linewidth and markersize
linewidth = 0.1
markersize = 2

# Plot the trajectory with modified parameters
plt.plot(df['X'], df['Y'], marker='.', linestyle='-', linewidth=linewidth, markersize=markersize)
plt.title('Trajectory Plot')
plt.xlabel('X Coordinates')
plt.ylabel('Y Coordinates')

# Convert the plot to HTML using mpld3
html_fig = mpld3.fig_to_html(plt.gcf())

# Generate a simple HTML template
html_template = f"""
<!DOCTYPE html>
<html>
<head>
  <title>Trajectory Plot</title>
  
</head>
<body>
  <h1>Trajectory Plot</h1>
  {html_fig}
</body>
</html>
"""

# <script src="https://mpld3.github.io/js/mpld3.v0.5.2.js"></script>

# Save the HTML to a file
with open('trajectory_plot.html', 'w') as f:
    f.write(html_template)

# Display the Matplotlib plot
plt.show()

通过该代码得到两个结果：1. 包含交互式绘图的HTML页面trajectory_plot.html；2. Matplotlib原生绘图。初始状态下两者外观相似，但缩放后，原生绘图与mpld3转换的HTML绘图中的标记（marker）尺寸差异显著。请问该现象产生的原因是什么？如何修正这一问题？

原因分析 #

• Matplotlib原生绘图中，标记尺寸是绝对像素值：缩放画布时，标记的物理像素大小保持不变，仅坐标系内的图形内容被缩放，所以标记视觉尺寸稳定。
• mpld3默认采用数据坐标相对尺寸：标记大小基于绘图的数据坐标系计算，缩放画布时，标记会随坐标系的缩放比例同步放大或缩小，导致与原生绘图的视觉差异。
• 大量数据点加剧差异：当数据点数量较多（如示例中的25000个），mpld3的渲染逻辑会对标记做批量处理，进一步放大尺寸渲染的不一致性。

解决方法 #

方法1：修改mpld3的标记尺寸属性，强制固定像素大小 #

在调用fig_to_html之前，添加代码修改线条对象的mpld3配置，将标记设置为固定像素尺寸：

# 获取当前坐标轴对象
ax = plt.gca()

# 遍历所有线条，设置固定标记尺寸
for line in ax.lines:
    # 对应原markersize=2，强制使用固定像素值
    line._mpld3_kwargs['marker_size'] = 2
    # 禁用标记的缩放适配
    line._mpld3_kwargs['marker_scaled'] = False

方法2：在HTML模板中自定义mpld3渲染逻辑 #

打开代码中注释掉的mpld3 JS引入，并添加自定义脚本修改标记渲染规则：
修改后的HTML模板如下：

<!DOCTYPE html>
<html>
<head>
  <title>Trajectory Plot</title>
  <script src="https://mpld3.github.io/js/mpld3.v0.5.2.js"></script>
  <script>
    mpld3.draw_figure = function(figid, data){
        var fig = mpld3.parseJson(data);
        // 遍历所有元素，设置标记为固定像素尺寸
        fig.elements.forEach(function(el){
            if(el.type === "line" && el.marker){
                el.marker.size = 2; // 匹配原markersize值
                el.marker.scaled = false; // 关闭缩放同步
            }
        });
        mpld3.display(fig, figid);
    };
  </script>
</head>
<body>
  <h1>Trajectory Plot</h1>
  {html_fig}
</body>
</html>

方法3：减少数据点数量（可选优化） #

如果业务场景允许，适当降低num_points的值，既能提升mpld3的渲染性能，也能减少批量渲染带来的尺寸偏差。

内容的提问来源于stack exchange，提问作者KansaiRobot