透過使用基礎的資料集（像是array、number等等），來產生繪製 svg <path>需要的命令列字串（d）
程式碼
// html- Line Generator
<svg id="lineWrapper"></svg>
// JS
const lineData = [
{ x: 50, y: 180 },
{ x: 50, y: 100 },
{ x: 200, y: 100 },
{ x: 200, y: 20 },
{ x: 400, y: 20 },
];
// 設定繪製線段的的方法
const drawLine = d3.line()
.x((d) => d.x) // 設定x值要抓哪項資料
.y((d) => d.y); // 設定
y值要抓哪項資料
console.log(drawLine(lineData));
// 帶入要換算的資料，得到路徑為 "M30,180L50,100L200,100L200,20L400,20"
// html
<svg id="lineWrapper"></svg>
// JS
d3.select("#lineWrapper")
.append("path")
.attr("d", drawLine(lineData))
.attr("stroke", "black")
.attr("stroke-width", "2")
.attr("fill", "none");
程式碼
//JS
const areaData = [
{ x: 30, y: 180 },
{ x: 50, y: 100 },
{ x: 200, y: 100 },
{ x: 200, y: 20 },
{ x: 400, y: 20 },
];
const drawArea = d3.area()
.x((d) => d.x)
.y1((d) => d.y)
.y0(10);
console.log(drawArea(areaData));
// 帶入要換算的資料，得到路徑為
// M30,180L50,100L200,100L200,20L400,20L400,10L200,10L200,10L50,10L30,10Z
// html
<svg id="areaWrapper"></svg>
// JS-繪製區域
d3.select("#areaWrapper")
.append("path")
.attr("d", drawArea(areaData))
.attr("stroke", "blue")
.attr("stroke-width", "3")
.attr("fill", "rgba(31, 211, 225, 0.2)");
curveBasis
// JS
const lineCurveData = [
{ x: 30, y: 180 },
{ x: 50, y: 100 },
{ x: 200, y: 100 },
{ x: 200, y: 20 },
{ x: 300, y: 20 },
];
// CurveBasis
const drawLineCurveBasis = d3
.line()
.curve(d3.curveBasis)
.x((d) => d.x)
.y((d) => d.y);
d3.selectAll(".curveBasisWrapper")
.append("path")
.attr("d", drawLineCurveBasis(lineCurveData))
.attr("stroke", "black")
.attr("stroke-width", "2")
.attr("fill", "none");
curveBasisClosed
curveBumpX
curveBundle
curveCardinal
curveCatmullRom
curveLinear
curveNatural
curveStep
Curve Display
curveBasis
curveBasisClosed
curveBumpX
curveBundle
curveCardinal
curveCatmullRom
curveLinear
curveNatural
curveStep
程式碼
//JS
const linkVerticalData = [
{ source: [100, 25], target: [25, 75] },
{ source: [100, 25], target: [100, 75] },
{ source: [100, 25], target: [175, 75] },
];
const drawVerticalLink = d3
.linkVertical()
.source((d) => d.source)
.target((d) => d.target);
// html
<svg id="linkVerticalWrapper"></svg>
// 繪製links
d3.select("#linkVerticalWrapper")
.selectAll("path")
.data(linkVerticalData)
.join("path")
.attr("d", drawVerticalLink)
.attr("fill", "none")
.attr("stroke", "black");
程式碼
//html
<svg id="linkHorizontalWrapper"></svg>
//JS
const linkHorizontalData = [
{ source: [100, 100], target: [300, 25] },
{ source: [100, 100], target: [300, 100] },
{ source: [100, 100], target: [300, 175] },
];
const drawHorizontalLink = d3
.linkHorizontal()
.source((d) => d.source)
.target((d) => d.target);
// 繪製links
d3.select("#linkHorizontalWrapper")
.selectAll("path")
.data(linkHorizontalData)
.join("path")
.attr("d", drawHorizontalLink)
.attr("fill", "none")
.attr("stroke", "black");
// JS
const drawArc = d3.arc()
.innerRadius(80) // 內圈半徑80
.outerRadius(90) // 內圈半徑90
.startAngle(0)
.endAngle(Math.PI);
// html
<svg id="arcWrapper" width="500" height="200"
style="border: 1px solid rgb(96, 96, 96)">
</svg>
d3.select("#arcWrapper")
.append("g")
// 把整個圓弧中心點移動到畫面正中的位置
.attr("transform", "translate(250,100)")
.append("path")
.attr("d", drawArc2)
.attr("stroke", "blue")
.attr("fill", "blue");
程式碼
//html
<svg id="arcWrapper"></svg>
//JS
const drawArc = d3.arc()
.innerRadius(80) // 內圈範圍80
.outerRadius(90) // 內圈範圍90
.startAngle(Math.PI * 1.2)
.endAngle(Math.PI * 2.8);
d3.select("#arcWrapper")
.append("path")
.attr("d", drawArc)
//把整個圓弧中心點移動到畫面正中的位置
.attr("transform", "translate(250,100)")
.attr("stroke", "blue")
.attr("fill", "blue");
程式碼
// html
<svg
id="symbolWrapper"
width="200"
height="100"
style="border: 1px solid rgb(96, 96, 96)"
></svg>
//JS
const symbolDiamond = d3.symbol().type(d3.symbolDiamond).size(200);
const symbolCross = d3.symbol().type(d3.symbolCross).size(200);
const symbolStar = d3.symbol().type(d3.symbolStar).size(200);
const symbolWrapper = d3.select("#symbolWrapper");
symbolWrapper
.append("path")
.attr("d", symbolDiamond)
.attr("transform", "translate(30,30)");
symbolWrapper
.append("path")
.attr("d", symbolCross)
.attr("transform", "translate(60,30)");
symbolWrapper
.append("path")
.attr("d", symbolStar)
.attr("transform", "translate(90,30)");