以下是一个简单的d3.js绘制柱状图的实例源码:
<!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>
<style>
.bar {
fill: steelblue;
}
</style>
</head>
<body>
<svg width="600" height="400"></svg>
<script>
// 数据
const data = [10, 20, 30, 40, 50];
// 设置SVG的宽度和高度以及边距
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
// 创建SVG容器
const svg = d3.select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
// 设置x轴的比例尺
const x = d3.scaleBand()
.domain(data.map((d, i) => i.toString()))
.range([0, width])
.padding(0.1);
// 设置y轴的比例尺
const y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height, 0]);
// 添加x轴
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));
// 添加y轴
svg.append('g')
.call(d3.axisLeft(y));
// 绘制柱状图
svg.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', (d, i) => x(i.toString()))
.attr('y', d => y(d))
.attr('width', x.bandwidth())
.attr('height', d => height - y(d));
</script>
</body>
</html>
一、基础概念
d3.select('svg')
会选择页面中的<svg>
元素。svg.selectAll('.bar').data(data)
就是把data
数组中的数据绑定到具有.bar
类的元素上(这里先选择所有.bar
类元素,虽然可能还没有创建)。x
轴的比例尺d3.scaleBand()
用于处理离散数据(像这里的柱状图的x坐标分类),y
轴的比例尺d3.scaleLinear()
用于处理连续数据。二、优势
三、类型(这里主要指可视化类型)
四、应用场景
如果在实际应用中遇到问题,例如柱状图高度显示不正确:
y
轴比例尺的domain
没有正确包含数据的最大值。height - y(d)
中的height
可能被错误赋值。y
轴比例尺的domain
设置,确保其上限是数据的最大值。