Chapter 3. Scales, Axes and Lines（比例尺、坐标轴与线）
（接上篇：《Getting Started with D3》填坑之旅（五）：第三章（上））
示例2：绘制两个地点的转门日均流量对比图
这里的转门指的是出入纽约地铁站的闸机旋转门，通过 1 人次则转数加 1。目标是将纽约两大地铁站——时代广场与大中央广场，每日进出闸机转门的平均流量（或人次数）对比情况，绘制在一张基于时间的散点图上，并进一步绘制散点折线图。
本例相当于在前一案例的基础上新增了 时间轴 和 折线 两个知识点。操作步骤如下：
- 取值范围：由于两组数据共用一个绘图区，计算 x 轴与 y 轴的实际取值范围时，要把两个站点的所有数据点都考虑进
d3.extent()； - 比例尺：
- 流量数 y 轴还是用线性比例尺（旧版：
d3.scale.linear()；新版：d3.scaleLinear()）； - x 轴计算时间比例尺时，旧版用
d3.time.scale()，新版用d3.scaleTime()；
- 流量数 y 轴还是用线性比例尺（旧版：
- 坐标轴：y 轴与示例一相同；x 轴则使用时间轴（旧版：
d3.svg.axis().scale(time_scale)；新版：d3.axisBottom(time_scale)）； - 坐标标签：无变化；
- 基本界面：需要创建两个 circle 组，分别代表时代广场和大中央广场，其余不变。
- 样式设置：给不同的站点数据设置不同的颜色加以区分。
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<title>Ch3 - Example 2 | Getting Started with D3</title>
</head>
<body>
<h2>Ch3 - Example 2 | Graphing Turnstile Traffic</h2>
<script src="/demos/js/d3.js"></script>
<script>
let json = null;
function draw(data) {
"use strict";
// badass visualization code goes here
json = data;
// Viewport setup
var margin = 40,
width = 700 - margin,
height = 300 - margin;
var chart = d3.select('body')
.append('svg')
.attr('width', width + margin)
.attr('height', height + margin)
.append('g')
.attr('class', 'chart');
chart.selectAll('circle.times_square')
.data(data.times_square)
.enter()
.append('circle')
.attr('class', 'times_square');
chart.selectAll('circle.grand_central')
.data(data.grand_central)
.enter()
.append('circle')
.attr('class', 'grand_central');
// scales
// y_scale
var count_extent = d3.extent(
data.times_square.concat(data.grand_central),
function(d) { return d.count }
);
var count_scale = d3.scale.linear()
.domain(count_extent)
.range([height, margin]);
// x_scale
var time_extent = d3.extent(
data.times_square.concat(data.grand_central),
function(d) { return d.time }
);
var time_scale = d3.time.scale()
.domain(time_extent)
.range([margin, width]);
// draw circles
chart.selectAll('circle')
.attr('cx', function(d) { return time_scale(d.time) })
.attr('cy', function(d) { return count_scale(d.count) })
.attr('r', 3);
// Axes
// x
var time_axis = d3.svg.axis().scale(time_scale);
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, '+height+')')
.call(time_axis);
// y
var count_axis = d3.svg.axis().scale(count_scale).orient('left');
chart.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate('+margin+', 0)')
.call(count_axis);
}
d3.json("/demos/data/turnstile_traffic.json", draw);
</script>
<style>
.axis {
font-family: Arial;
font-size: 0.6em;
}
path {
fill: none;
stroke: black;
stroke-width: 2px;
}
.tick {
fill: none;
stroke: black;
}
circle {
stroke: black;
stroke-width: 0.5px;
}
circle.times_square {
fill: DeepPink;
}
circle.grand_central {
fill: MediumSeaGreen;
}
</style>
</body>
</html>
这里和书中的示例源码相比略有调整。首先是用变量引用替换了多次从 d3.select() 引用 SVG 元素。然后是实操过程中，发现第 31 行创建的 chart 组是多余的。其实应该将所有的绘图元素都放到 chart 里，使其成为一个整体。于是有了以 chart 变量开头的微调（L33，L39，L64，L78）。
接下来引入 path 元素，将点连成线。path 的关键属性 d，其值为一组绘图指令，负责将多个点按指令顺次连成一段折线。D3 对 d 属性的取值封装了一个折线构造函数，利用该函数，只需要指定源数据和位置信息，即可快速绘制折线段。D3 的这一强大的工具函数，旧版为 d3.svg.line()，新版为 d3.line()。返回的结果函数，包含一个 x(fn) 和 y(fn) 方法，参数都是一个访问函数 fn，负责将对应轴上的数据点，分别映射到该比例尺下的绘图区。
加入以下语句绘制折线：
// paths
var line = d3.svg.line()
.x(function(d) { return time_scale(d.time) })
.y(function(d) { return count_scale(d.count) });
// make lines
svg.append('path')
.attr('class', 'times_square')
.attr('d', line(data.times_square));
svg.append('path')
.attr('class', 'grand_central')
.attr('d', line(dat
在加上折线的 CSS 样式：
path.times_square {
stroke: DeepPink;
}
path.grand_central {
stroke: MediumSeaGreen;
}
得到两站点的折线散点图：
再加上与示例一类似的坐标轴标签，即可得到最终效果：
// axis labels
// y
chart.select('.y.axis')
.append('text')
.text('mean number of turnstile revolutions')
.attr('transform', 'rotate(90, '+ (-margin) +', 0)')
.attr('x', 20)
.attr('y', 0);
// x
chart.select('.x.axis')
.append('text')
.text('time')
.attr('x', function(){ return (width / 1.6) - margin })
.attr('y', margin / 1.5);
有了示例一的填坑经历，示例二中的新版本改写的坑也就不再是坑了：
- 坐标轴标签默认不显示：需对
text标签设置填充颜色：.attr('fill', 'black')； - 坐标轴标签位置偏移：y 轴标签旋转后需加入垂直平移量，具体根据实际确定（这里取
translate(155)）； - 坐标轴刻度标签过粗：注释 CSS 样式：
.tick{ stroke: black; }
连点成线后，就可以进行简单的数据分析了：时代广场的日均流量滞后于大中央广场；工作日早高峰时段的流量峰值方面，大中央广场更胜一筹……
虽然缺了点图例标识哪条线是哪个站点，不过上手阶段不必一步到位，后续章节应该有扩展的。
新版 D3 完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<title>Ch3 - Example 2 | Getting Started with D3</title>
</head>
<body>
<h2>Ch3 - Example 2 | Graphing Turnstile Traffic</h2>
<script src="/demos/js/d3.v6.js"></script>
<script>
let json = null;
function draw(data) {
"use strict";
// badass visualization code goes here
json = data;
// Viewport setup
const margin = 40,
width = 700 - margin,
height = 300 - margin;
const chart = d3.select('body')
.append('svg')
.attr('width', width + margin)
.attr('height', height + margin)
.append('g')
.attr('class', 'chart');
chart.selectAll('circle.times_square')
.data(data.times_square)
.join(enter => enter.append('circle')
.attr('class', 'times_square')
);
chart.selectAll('circle.grand_central')
.data(data.grand_central)
.join(enter => enter.append('circle')
.attr('class', 'grand_central')
);
// scales
// y_scale
const count_extent = d3.extent(
data.times_square.concat(data.grand_central),
d => d.count
);
const count_scale = d3.scaleLinear()
.domain(count_extent)
.range([height, margin]);
// x_scale
const time_extent = d3.extent(
data.times_square.concat(data.grand_central),
d => d.time
);
const time_scale = d3.scaleTime()
.domain(time_extent)
.range([margin, width]);
// draw circles
d3.selectAll('circle')
.attr('cx', d => time_scale(d.time))
.attr('cy', d => count_scale(d.count))
.attr('r', 3);
// Axes
// x
const time_axis = d3.axisBottom(time_scale);
chart.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0, ${height})`)
.call(time_axis);
// y
const count_axis = d3.axisLeft(count_scale);
chart.append('g')
.attr('class', 'y axis')
.attr('transform', `translate(${margin}, 0)`)
.call(count_axis);
// paths
const line = d3.line()
.x(d => time_scale(d.time) )
.y(d => count_scale(d.count) );
// make lines
chart.append('path')
.attr('class', 'times_square')
.attr('d', line(data.times_square));
chart.append('path')
.attr('class', 'grand_central')
.attr('d', line(data.grand_central));
// axis labels
// y
d3.select('.y.axis')
.append('text')
.text('mean number of turnstile revolutions')
.attr('fill', 'black')
.attr('transform', `rotate(90, ${-margin}, 0) translate(155)`)
.attr('x', 20)
.attr('y', 0);
// x
d3.select('.x.axis')
.append('text')
.text('time')
.attr('fill', 'black')
.attr('x', (width / 1.6) - margin)
.attr('y', margin / 1.5);
}
d3.json("/demos/data/turnstile_traffic.json").then(draw)
.catch(console.error);
</script>
<style>
.axis {
font-family: Arial;
font-size: 0.6em;
}
path {
fill: none;
stroke: black;
stroke-width: 2px;
}
path.times_square {
stroke: DeepPink;
}
path.grand_central {
stroke: MediumSeaGreen;
}
.tick {
fill: none;
/* stroke: black; */
}
circle {
stroke: black;
stroke-width: 0.5px;
}
circle.times_square {
fill: DeepPink;
}
circle.grand_central {
fill: MediumSeaGreen;
}
</style>
</body>
</html>
扫一扫
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
