使用 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
  • 相關文章:

  • D3 畫線的方法
  • 發表迴響

    你的電子郵件位址並不會被公開。 必要欄位標記為 *