D3 - SVG 线中基础和线性插值的区别 [英] D3 - Difference between basis and linear interpolation in SVG line

问题描述

我实现了一个多系列折线图，就像 M. Bostock 和 ，人们喜欢将其用作插值函数，正是因为它可以平滑极端峰值.当您对希望平滑变化但只有锐利、不经常采样的数据进行建模时，这很有用.这样做的结果是生成的线不会连接所有数据点，从而改变极值的外观.

在您的情况下，尖峰是有趣的特征，通常为 0 基线值的例外.当您使用样条插值时，您正在平滑这些峰值.

这是一个有趣的演示，可以使用不同类型的行插入:http://bl.ocks.org/mbostock/4342190

您可以四处拖动数据，使它们看起来像您的尖峰，甚至可以单击以添加新点.然后，切换到基础插值并观察峰值得到平均.

I implemented a multi-series line chart like the one given here by M. Bostock and ran into a curious issue which I cannot explain myself. When I choose linear interpolation and set my scales and axis everything is correct and values are well-aligned.

But when I change my interpolation to basis, without any modification of my axis and scales, values between the lines and the axis are incorrect.

What is happening here? With the monotone setting I can achieve pretty much the same effect as the basis interpolation but without the syncing problem between lines and axis. Still I would like to understand what is happening.

解决方案

The basis interpolation is implementing a beta spline, which people like to use as an interpolation function precisely because it smooths out extreme peaks. This is useful when you are modeling something you expect to vary smoothly but only have sharp, infrequently sampled data. A consequence of this is that resulting line will not connect all data points, changing the appearance of extreme values.

In your case, the sharp peaks are the interesting features, the exception to the typically 0 baseline value. When you use a spline interpolation, you are smoothing over these peaks.

Here is a fun demo to play with the different types of line interpoations: http://bl.ocks.org/mbostock/4342190

You can drag the data around so they resemble a sharp peak like yours, even click to add new points. Then, switch to a basis interpolation and watch the peak get averaged out.

这篇关于D3 - SVG 线中基础和线性插值的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！