HTML5 图形和数据可视化秘籍
由于原文章较长，下面仅展示如何使用D3.js创建一个简单的条形图的核心代码。
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
// 假设data是一个对象数组，每个对象包含name和value两个属性
var data = [
{ name: 'A', value: 20 },
{ name: 'B', value: 15 },
{ name: 'C', value: 10 }
];
// 设置图表布局
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
width = 200 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// 创建SVG容器
var svg = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// 设置比例尺度
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
// 定义比例尺度的域
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
// 绘制条形
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) { return x(d.name); })
.attr('y', function(d) { return y(d.value); })
.attr('width', x.bandwidth())
.attr('height', function(d) { return height - y(d.value); });
// 添加轴
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x));
svg.append('g')
.attr('class', 'axis')
.call(d3.axisLeft(y).ticks(null, 's'))
.append('text')
.attr('x', 2)
.attr('y', y(y.ticks().pop()) + 0.5)
.attr('dy', '0.32em')
.attr('fill', '#000')
.attr('font-weight', 'bold')
.attr('text-anchor', 'start')
.text('Value');
</script>
</body>
</html>这段代码使用D3.js创建了一个简单的条形图。首先，我们定义了图表的边距和尺寸，并创建了SVG容器。然后，我们设置了数据的比例尺度，并定义了x轴（对应于名称）和y轴（对应于值）的域。接着，我们使用.selectAll().data().enter().append()模式来创建条形，并设置它们的位置和尺寸。最后，我们添加轴到SVG容器中。这个例子展示了如何使用D3.js创建基本的数据可视化，并且是学习进行数据可视化的一个很好的起点。
评论已关闭