使用 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) 對應: