使用D3.js在曲线类型之间进行过渡 [英] Transition Between Curve Types Using D3.js

问题描述

我想使用D3.js在曲线类型之间转换.

I'd like to transition between curve types using D3.js.

看看此区块.数据保持不变，但曲线类型改变.我期望路径在平面上保持它们的大概位置-毕竟数据保持不变-但事实并非如此.路径似乎在重画，尽管我不明白为什么从线性到线性，路径似乎是从左向右重画，而从线性到线性，路径似乎是从右向左重画.

Take a look at this block. The data stay the same but the curve type changes. I was expecting the paths to maintain their approximate positions on the plane -- the data stay the same, after all -- but they don't. The paths appear to be redrawn, although I don't understand why with basis to linear the paths seem to be redrawn from left to right whilst with linear to basis the paths seem to be redrawn from right to left.

我已经阅读了Mike Bostock在路径转换上的帖子，但我认为这是一个稍微不同的问题.在那里，数据发生了变化，但曲线类型保持不变.在这里，数据保持不变，但是曲线类型改变了.

I've read Mike Bostock's post on Path Transitions, but I think this is a slightly different problem. There, the data change but the curve type remains the same. Here, the data stay the same but the curve type changes.

在此先感谢您的帮助！

推荐答案

要了解为什么会有这样的 strange 过渡，让我们使用curveBasis和curveBasis比较路径的d属性. curveLinear.

To understand why you have such a strange transition, let's compare the d attribute of the paths using a curveBasis and a curveLinear.

首先，一个curveBasis:

d =M0,101.2061594964L45.48756294826797,89.52282837400001C90.97512589653594,77.83949725160001,181.95025179307189,54.47283500680002,271.46268884480395,84.08731623460001C360.975125896536,113.70179746240001,449.0248741034641,196.2974221628,538.5373111551961,222.09899531679994C628.0497482069281,247.90056847079998,719.0248741034642,216.90809007840002， 764.512437051732,201.4118508822L810,185.915611686"

d="M0,101.2061594964L45.48756294826797,89.52282837400001C90.97512589653594,77.83949725160001,181.95025179307189,54.47283500680002,271.46268884480395,84.08731623460001C360.975125896536,113.70179746240001,449.0248741034641,196.2974221628,538.5373111551961,222.09899531679994C628.0497482069281,247.90056847079998,719.0248741034642,216.90809007840002,764.512437051732,201.4118508822L810,185.915611686"

现在有一个curveLinear(相同数据):

Now a curveLinear (same data):

d ="M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686"

d="M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686"

如您所见，使用curveLinear可使路径更简单.因此，奇怪的过渡是预期的行为.

As you can see, the path is way simpler with curveLinear. So, the strange transition is the expected behaviour.

一种可能的解决方案是使用路径插值，如Mike Bostock的此代码所建议的

A possible solution is using a path interpolation, as proposed in this code from Mike Bostock.

这是您的带有路径插值的bl.ocks: http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772

Here is your bl.ocks with a path interpolation: http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772

PS:如果要避免在加载页面时出现奇怪的过渡(所有路径都来自左上角)，请使用常规的attr方法首次绘制它们.

PS: If you want to avoid that strange transition when you load the page (all paths coming from the top left corner), draw them the first time using a regular attr method.

这篇关于使用D3.js在曲线类型之间进行过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！