使用 D3 畫線的方法

使用 D3 畫線的方法:

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

var svg = d3.select("body").append("svg")
	.attr("width", "300")
	.attr("height", "300");

var line = d3.svg.line();

svg.append("path")
	.attr("d", line(lineData))
	.attr("stroke", "black")
	.attr("stroke-width", "1px")
	.attr("fill", "none");

順利的話,線條就畫出來囉!

但是也可能結果什麼都沒畫出來,因為當呼叫 var line = d3.svg.line(); 出現了 Uncaught TypeError: d3.svg.line is not a function 的錯誤!

原因是 d3.svg.line() 為 D3 v3.x 版本的語法。

如果是使用 D3 v4.x / v5.x 以後版本,請直接叫用 d3.line() 即可:

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

var svg = d3.select("body").append("svg")
	.attr("width", "300")
	.attr("height", "300");

var line = d3.line();

svg.append("path")
	.attr("d", line(lineData))
	.attr("stroke", "black")
	.attr("stroke-width", "1px")
	.attr("fill", "none");

D3 v3.x 與 v4.x 的圖形 (shape) 對應:

  • d3.svg.line → d3.line
  • d3.svg.line.radial → d3.radialLine
  • d3.svg.area → d3.area
  • d3.svg.area.radial → d3.radialArea
  • d3.svg.arc → d3.arc
  • d3.svg.symbol → d3.symbol
  • d3.svg.symbolTypes → d3.symbolTypes
  • d3.layout.pie → d3.pie
  • d3.layout.stack → d3.stack
  • d3.svg.diagonal → 移除了
  • d3.svg.diagonal.radial → 移除了