如何解决Datashader canvas.line()的aliasing问题，实现类Bokeh平滑曲线？

我用Bokeh绘制温度曲线，但数据集超过50万条测量值时，即便开启output_backend="webgl"还是卡顿。尝试用Datashader提升渲染速度和交互流畅度，但生成的结果有锯齿，视觉效果不如Bokeh原生平滑。以下是对比代码：

import pandas as pd
import datashader as ds
import datashader.transfer_functions as tf
from bokeh.plotting import figure
from bokeh.io import output_notebook, show
from bokeh.models import ColumnDataSource
from bokeh.layouts import row
import numpy as np
output_notebook()

# generate signal
n = 2000
start = 0
end = 70
signal = [np.sin(x) for x in np.arange(start, end, step=(end-start)/n)]
signal = pd.DataFrame(signal, columns=["signal"])
signal = signal.reset_index()

# create a bokeh plot
source = ColumnDataSource(signal)
p = figure(plot_height=300, plot_width=400, title="bokeh plot")
p.line(source=source, x="index", y="signal")

# create a datashader image and put it in a bokeh plot
x_range = (signal["index"].min(), signal["index"].max())
y_range = (signal["signal"].min(), signal["signal"].max())
cvs = ds.Canvas(x_range=x_range, y_range=y_range, plot_height=300, plot_width=400)
agg = cvs.line(signal, 'index', 'signal')
img = tf.shade(agg)
image_source = ColumnDataSource(data=dict(image = [img.data]))
q = figure(x_range=x_range, y_range=y_range, plot_height=300, plot_width=400, title="datashader + bokeh")
q.image_rgba(source = image_source, image="image", dh=(y_range[1] - y_range[0]), dw=(x_range[1] - x_range[0]), x=x_range[0], y=y_range[0], dilate=False)

# visualize both plot, bokeh on left
show(row(p, q))

请问如何修复这个锯齿问题，获得和Bokeh相近的平滑渲染效果？

Datashader的锯齿问题主要是因为它基于像素级聚合，原生渲染会偏“硬朗”，你可以通过几个简单调整让曲线更平滑，接近Bokeh的视觉效果：

1. 用tf.dynspread()扩散像素 #

dynspread()能根据周围像素密度自动扩散颜色，填补缝隙、平滑边缘，这是最常用的抗锯齿方法：

修改生成图像的代码：

# 替换原来的img = tf.shade(agg)
img = tf.dynspread(tf.shade(agg), threshold=0.5, max_px=2)

• threshold：控制扩散触发阈值，值越小扩散范围越大
• max_px：最大扩散像素数，调整这个参数就能控制平滑程度

2. 先提升Canvas分辨率再缩放 #

可以先创建2倍甚至更高分辨率的Canvas，再缩小到目标尺寸，相当于做了超采样抗锯齿，效果非常明显：

# 创建2倍分辨率的Canvas
cvs = ds.Canvas(x_range=x_range, y_range=y_range, plot_height=600, plot_width=800)
agg = cvs.line(signal, 'index', 'signal')
img = tf.shade(agg)
# Bokeh里还是用原来的300x400尺寸，自动缩放图像
q = figure(x_range=x_range, y_range=y_range, plot_height=300, plot_width=400, title="datashader + bokeh (supersampled)")
q.image_rgba(source = image_source, image="image", dh=(y_range[1] - y_range[0]), dw=(x_range[1] - x_range[0]), x=x_range[0], y=y_range[0], dilate=False)

这种方法会增加一点计算量，但50万条数据完全hold住，抗锯齿效果立竿见影。

3. 叠加tf.gaussian_filter()做模糊 #

如果还是觉得锯齿明显，可以再加个高斯模糊：

img = tf.gaussian_filter(tf.shade(agg), sigma=1.0)
# 也可以和dynspread结合，效果更好
img = tf.dynspread(tf.gaussian_filter(tf.shade(agg), sigma=0.8), threshold=0.5)

sigma控制模糊程度，值越大越模糊，别调太高，不然曲线细节会糊掉。

4. 调整cvs.line()的线条宽度 #

Datashader的line()方法有个line_width参数，适当加宽线条也能减少锯齿感：

agg = cvs.line(signal, 'index', 'signal', line_width=2)

推荐组合方案 #

针对你的温度曲线场景，我推荐超采样+dynspread的组合，既能保证平滑度，又不会损失太多曲线细节：

# 修改后的Datashader部分代码
x_range = (signal["index"].min(), signal["index"].max())
y_range = (signal["signal"].min(), signal["signal"].max())
# 2倍分辨率超采样
cvs = ds.Canvas(x_range=x_range, y_range=y_range, plot_height=600, plot_width=800)
agg = cvs.line(signal, 'index', 'signal', line_width=1.5)
img = tf.dynspread(tf.shade(agg), threshold=0.3, max_px=2)
image_source = ColumnDataSource(data=dict(image = [img.data]))
q = figure(x_range=x_range, y_range=y_range, plot_height=300, plot_width=400, title="datashader + bokeh (smoothed)")
q.image_rgba(source = image_source, image="image", dh=(y_range[1] - y_range[0]), dw=(x_range[1] - x_range[0]), x=x_range[0], y=y_range[0], dilate=False)

调整之后，渲染出的曲线视觉效果应该和Bokeh原生的非常接近，同时还能保持Datashader处理大数据时的流畅交互体验。

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