<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js 入门示例</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
// 数据
const data = [30, 86, 168, 281, 303, 365];
// 设置图表的宽度和高度
const width = 500;
const height = 300;
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
// 创建 SVG 画布
const svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
// 创建比例尺
const x = d3.scaleBand()
.domain(d3.range(data.length)) // X 轴范围
.range([margin.left, width - margin.right]) // X 轴宽度
.padding(0.1); // 柱子之间的间距
const y = d3.scaleLinear()
.domain([0, d3.max(data)]) // Y 轴范围
.range([height - margin.bottom, margin.top]); // Y 轴高度
// 添加柱子
svg.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i)) // X 轴位置
.attr("y", d => y(d)) // Y 轴位置
.attr("width", x.bandwidth()) // 柱子宽度
.attr("height", d => height - margin.bottom - y(d)) // 柱子高度
.attr("fill", "steelblue"); // 柱子颜色
// 添加 X 轴
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => i + 1));
// 添加 Y 轴
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
</script>
</body>
</html>
