d3设置line长度_使用 D3 畫曲線的方法

使用 D3 v3.x 畫曲線的方法：

var lineData = [[50,50],[100,50],[100,100],[100,150],[50,100]];

var line = d3.svg.line()

.interpolate('basis');

svg.append("path")

.attr("d", line(lineData))

.attr("stroke", "black")

.attr("stroke-width", "1px")

.attr("fill", "none");

如果是在 D3 v4.x 以後使用 interpolate() 會出現 Uncaught TypeError: d3.line(…).interpolate is not a function 的錯誤！

在 D3 v4.x / v5.x 以後版本的用法：

var lineData = [[50,50],[100,50],[100,100],[100,150],[50,100]];

var line = d3.line()

.curve(d3.curveBasis);

svg.append("path")

.attr("d", line(lineData))

.attr("stroke", "black")

.attr("stroke-width", "1px")

.attr("fill", "none");

D3 v3.x interpolate 與 v4.x 的對應：

linear → d3.curveLinear

linear-closed → d3.curveLinearClosed

step → d3.curveStep

step-before → d3.curveStepBefore

step-after → d3.curveStepAfter

basis → d3.curveBasis

basis-open → d3.curveBasisOpen

basis-closed → d3.curveBasisClosed

bundle → d3.curveBundle

cardinal → d3.curveCardinal

cardinal-open → d3.curveCardinalOpen

cardinal-closed → d3.curveCardinalClosed

monotone → d3.curveMonotoneX

相關文章：