D3
D3.js (Data-Driven Documents) 是一個基于 JavaScript 的庫，用于生成動態、交互式數據可視化。它通過操作文檔對象模型 (DOM) 來生成數據驅動的圖形。官方網站是 https://d3js.org/
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>D3.js Tutorial</title><script src="https://d3js.org/d3.v7.min.js"></script></head><body><p>abc</p><script>// 選擇第一個匹配的元素d3.select("body").style("background-color", "lightblue");// 選擇所有匹配的元素d3.selectAll("p").style("color", "red");</script></body>
</html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>D3.js Tutorial</title><script src="https://d3js.org/d3.v7.min.js"></script></head><body><script>// 綁定數據并創建元素const dataset = [10, 20, 30, 40, 50];const svg = d3.select("body").append("svg").attr("width", 500).attr("height", 500);for (let i = 0; i < dataset.length; i++) {svg.append("circle").attr("cx", (i + 1) * 60).attr("cy", 250).attr("r", dataset[i]).attr("fill", "blue");}svg.selectAll("circle").data(dataset).enter().append("circle").attr("cx", (d, i) => (i + 1) * 60).attr("cy", 250).attr("r", (d) => d).attr("fill", "blue");</script></body>
</html>
縮放
const svg = d3.select("svg");
const zoom = d3.zoom().scaleExtent([1, 10]).on("zoom", zoomed);svg.call(zoom);function zoomed(event) {svg.attr("transform", event.transform);
}拖拽
const drag = d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended);svg.selectAll("circle").call(drag);function dragstarted(event, d) {d3.select(this).raise().attr("stroke", "black");}function dragged(event, d) {d3.select(this).attr("cx", (d.x = event.x)).attr("cy", (d.y = event.y));}function dragended(event, d) {d3.select(this).attr("stroke", null);}例1? 柱狀圖
以下值[30, 86, 168, 281, 303, 365]，作為y的值，width=500，height=300，畫柱狀圖，柱子寬度均分width，每個柱子間距1。不需要坐標。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>D3.js Tutorial</title><script src="https://d3js.org/d3.v7.min.js"></script></head><body><script>// 綁定數據并創建元素const data = [30, 86, 168, 281, 303, 365];const width = 500;const height = 300;const barWidth = width / data.length;const svg = d3.select("body").append("svg").attr("width", width).attr("height", height);svg.selectAll("rect").data(data).enter().append("rect").attr("width", barWidth - 1).attr("height", (d) => d).attr("x", (d, i) => i * barWidth).attr("y", (d) => height - d).attr("fill", "teal");</script></body>
</html>
例2?折線
利用上面的數據畫折線
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>D3.js Tutorial</title><script src="https://d3js.org/d3.v7.min.js"></script></head><body><script>const data = [30, 86, 168, 281, 303, 365];const width = 500;const height = 300;const x = d3.scaleLinear().domain([0, data.length - 1]).range([0, width]);const y = d3.scaleLinear().domain([0, d3.max(data)]).range([height, 0]);const line = d3.line().x((d, i) => x(i)).y((d) => y(d));const svg = d3.select("body").append("svg").attr("width", width).attr("height", height);svg.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-width", 1.5).attr("d", line);</script></body>
</html>
)
