D3开发的基本框架步骤

D3.js 是一个功能强大的数据可视化库，用于在网页上创建复杂的图表和交互式图形。以下是一个基本的 D3.js 开发框架，包括了常见的步骤和代码示例，帮助你快速入门。

基本框架

引入 D3.js 库
设置 SVG 容器
加载数据
创建比例尺
绘制图形
添加轴
添加交互

示例效果图

在这里插入图片描述

示例代码

以下是一个完整的示例，展示如何使用 D3.js 创建一个简单的条形图：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://d3js.org/d3.v6.min.js"></script><style>.bar {fill: steelblue;}.bar:hover {fill: brown;}</style>
</head>
<body><svg width="800" height="500"></svg><script>// 设置 SVG 容器的尺寸const svgWidth = 800;const svgHeight = 500;const margin = { top: 20, right: 30, bottom: 40, left: 50 };const width = svgWidth - margin.left - margin.right;const height = svgHeight - margin.top - margin.bottom;// 创建 SVG 容器const svg = d3.select("svg").attr("width", svgWidth).attr("height", svgHeight).append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);// 加载数据const data = [{ label: "A", value: 30 },{ label: "B", value: 80 },{ label: "C", value: 50 },{ label: "D", value: 100 },{ label: "E", value: 40 }];// 创建比例尺const xScale = d3.scaleBand().domain(data.map(d => d.label)).range([0, width]).padding(0.2);const yScale = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([height, 0]);// 绘制条形图svg.selectAll("rect").data(data).enter().append("rect").attr("class", "bar").attr("x", d => xScale(d.label)).attr("y", d => yScale(d.value)).attr("width", xScale.bandwidth()).attr("height", d => height - yScale(d.value));// 添加轴const xAxis = d3.axisBottom(xScale);const yAxis = d3.axisLeft(yScale);svg.append("g").attr("transform", `translate(0, ${height})`).call(xAxis);svg.append("g").call(yAxis);// 添加交互svg.selectAll(".bar").on("mouseover", function(event, d) {d3.select(this).attr("fill", "brown");}).on("mouseout", function(event, d) {d3.select(this).attr("fill", "steelblue");});</script>
</body>
</html>

解释

引入 D3.js 库:

<script src="https://d3js.org/d3.v6.min.js"></script>

设置 SVG 容器:

const svgWidth = 800;
const svgHeight = 500;
const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const width = svgWidth - margin.left - margin.right;
const height = svgHeight - margin.top - margin.bottom;const svg = d3.select("svg").attr("width", svgWidth).attr("height", svgHeight).append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);

加载数据:

const data = [{ label: "A", value: 30 },{ label: "B", value: 80 },{ label: "C", value: 50 },{ label: "D", value: 100 },{ label: "E", value: 40 }
];

创建比例尺:

const xScale = d3.scaleBand().domain(data.map(d => d.label)).range([0, width]).padding(0.2);const yScale = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([height, 0]);

绘制图形:

svg.selectAll("rect").data(data).enter().append("rect").attr("class", "bar").attr("x", d => xScale(d.label)).attr("y", d => yScale(d.value)).attr("width", xScale.bandwidth()).attr("height", d => height - yScale(d.value));

添加轴:

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);svg.append("g").attr("transform", `translate(0, ${height})`).call(xAxis);svg.append("g").call(yAxis);

添加交互:

svg.selectAll(".bar").on("mouseover", function(event, d) {d3.select(this).attr("fill", "brown");}).on("mouseout", function(event, d) {d3.select(this).attr("fill", "steelblue");});