D3 基础1

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>