D3.js 中 Box Plots详解
Posted wan353694124
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了D3.js 中 Box Plots详解相关的知识，希望对你有一定的参考价值。
Box Plot
聊聊box plot，将自己阅读、理解d3.js的箱形图源码的过程和思路记录下来……
箱形图（Box-plot）又称为盒须图、盒式图或箱线图，是一种用作显示一组数据分散情况资料的统计图。因形状如箱子而得名。在各种领域也经常被使用，常见于品质管理。 —— [ 百度百科 ]
话不多少，先睹为快，用d3实现的箱形图如图1所示：
眨一看，箱形图有点难懂，图中的盒子，以及各种线段上标注的数字，还有那莫名奇妙的小空心圆圈什么意思？其实，我第一眼看也是一脸蒙，接着就查阅相关资料，搞明白了这张神秘的图，请看图2，保证您一秒懂什么是箱形图。
所以，箱形图主要包含六个数据节点，将一组数据从大到小排列，分别计算出他的上边缘（largest value），上四分位数Q3（upper quartile），中位数（median），下四分位数Q1（lower quartile），下边缘（smallest value），还有一个异常值（图中的空心小圆圈所示）
粗略了解了箱形图怎么回事之后，开始研究d3画箱形图的方式，其中包括了三个文件，分别是index.html文件；box.js文件以及样例数据文件morley.csv，下面分别对整个实现过程进行详细解释。
box.js文件解读 —— [ 源码 ]
(function()
// Inspired by http://informationandvisualization.de/blog/box-plot
//@onlywan 在该立即执行函数中定义以下一系列操作
d3.box = function()
var width = 1,
height = 1,
duration = 0,
domain = null,
value = Number,
whiskers = boxWhiskers,
quartiles = boxQuartiles, //@onlywan 声明获取四分位数的函数
tickFormat = null;
// For each small multiple…
function box(g)
//@onlywan 以下计算绘制箱形图所需的各种数据参数：
// 第一步:对每个数组进行排序；
// 第二步:计算每个数组的 上四分位数、下四分位数、中位数、最大值、最小值;
// 第三步:获取每个数组最大值、最小值的index;
// 第四步:计算每个数组异常值的index;
// 第五步:定义比例尺;
// 第六步:给各种元素绑定数据并设置相关的属性;
g.each(function(d, i)
//@onlywan 先将d数组进行数值类型的映射转换，再按照升序顺序对d数组进行排序
d = d.map(value).sort(d3.ascending);
var g = d3.select(this),
n = d.length, //@onlywan 记录数组的长度
min = d[0], //@onlywan 记录数组的最小值
max = d[n - 1]; //@onlywan 记录数组的最大值
// Compute quartiles. Must return exactly 3 elements.
// @onlywan 获取数组d的三个分位数，见boxQuartiles()函数
var quartileData = d.quartiles = quartiles(d);
// Compute whiskers. Must return exactly 2 elements, or null.
// @onlywan 获取数组d的最大值和最小值在数组中的下标，见boxWhiskers()函数，此处命名为
// boxWhiskers,盒子的胡须，自我理解应该是因为箱形图中每个盒子的两端用虚线来
// 标识上下边缘数值，看起来长得像胡须，因此命名为whisker吧
var whiskerIndices = whiskers && whiskers.call(this, d, i),
whiskerData = whiskerIndices && whiskerIndices.map(function(i) return d[i]; );
// Compute outliers. If no whiskers are specified, all data are "outliers".
// We compute the outliers as indices, so that we can join across transitions!
// @onlywan 获取异常值的下标，即箱形图中的那些小空心圆圈
// d3.range([start,]stop[,step]);返回等差数列函数；如d3.range(6)返回
// [0,1,2,3,4,5]
var outlierIndices = whiskerIndices
? d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n))
: d3.range(n);
// Compute the new x-scale.
//@onlywan d3.scale.linear()来指定比例尺为线性的，返回线性比例尺；
// 后面的domain()和range()分别表示 定义域和值域，类似于数学函数中，x的取值范围
// 称为定义域，y的取值范围称为值域；
// 通过计算得出，此处定义域指定为[min,max]，即当前数组的最小值到最大值的区间；
// 此处值域指定为[1,0],此处的height是在函数开始定义的，值为1；
// 最终比例尺的线性关系满足如 当x=min时，y=height,当x=max时，y=0这样的关系
var x1 = d3.scale.linear()
.domain(domain && domain.call(this, d, i) || [min, max])
.range([height, 0]);
// Retrieve the old x-scale, if this is an update.
//@onlywan 若是某种更新，要恢复旧比例尺，结果要么是图像现有的，要么是定义域为[0,Infinity]
// 值域为上边x1中值域
var x0 = this.__chart__ || d3.scale.linear()
.domain([0, Infinity])
.range(x1.range());
// Stash the new scale.
//@onlywan 将新的比例尺函数存储在__chart__变量中；
this.__chart__ = x1;
// Note: the box, median, and box tick elements are fixed in number,
// so we only have to handle enter and update. In contrast, the outliers
// and other elements are variable, so we need to exit them! Variable
// elements also fade in and out.
//@onlywan 上面英文注释中的enter、exit动作是指 d3中的函数 enter()函数和
// exit()函数，enter()函数是选中那些缺少的虚拟dom，exit()函数的
// 的作用是选中那些多余的dom元素；两个函数都是选择器；
// Update center line: the vertical line spanning the whiskers.
//@onlywan 设置中心线的绑定数组，这里将[min,max]数组绑定到中心线上
var center = g.selectAll("line.center")
.data(whiskerData ? [whiskerData] : []);
//@onlywan 为缺少中心线的添加 中心线，绑定class、x1,y1,x2,y2属性，并且指
// 动画动作；
center.enter().insert("line", "rect")
.attr("class", "center")
.attr("x1", width / 2)
.attr("y1", function(d) return x0(d[0]); )
.attr("x2", width / 2)
.attr("y2", function(d) return x0(d[1]); ) .style("opacity", 1e-6) .transition() .duration(duration) .style("opacity", 1) .attr("y1", function(d) return x1(d[0]); ) .attr("y2", function(d) return x1(d[1]); ); //@onlywan 为中心线添加动画动作以及y坐标的值 center.transition() .duration(duration) .style("opacity", 1) .attr("y1", function(d) return x1(d[0]); ) .attr("y2", function(d) return x1(d[1]); ); //@onlywan 为多余出来的中心线元素添加移除动画动作 center.exit().transition() .duration(duration) .style("opacity", 1e-6) .attr("y1", function(d) return x1(d[0]); ) .attr("y2", function(d) return x1(d[1]); ) .remove(); // Update innerquartile box. //@onlywan 为box元素绑定数据，数据为三个，上四分位数，下四分位数和中位数 var box = g.selectAll("rect.box") .data([quartileData]); //@onlywan 补充添加缺少的box元素，并且为其添加相关属性及动画 box.enter().append("rect") .attr("class", "box") .attr("x", 0) .attr("y", function(d) return x0(d[2]); ) .attr("width", width) .attr("height", function(d) return x0(d[0]) - x0(d[2]); ) .transition() .duration(duration) .attr("y", function(d) return x1(d[2]); ) .attr("height", function(d) return x1(d[0]) - x1(d[2]); ); //@onlywan 为box添加动画 box.transition() .duration(duration) .attr("y", function(d) return x1(d[2]); ) .attr("height", function(d) return x1(d[0]) - x1(d[2]); ); // Update median line. //@onlywan 为中位线绑定数据 var medianLine = g.selectAll("line.median") .data([quartileData[1]]); //@onlywan 补充缺少的中位线，并且给其添加相关属性及动画 medianLine.enter().append("line") .attr("class", "median") .attr("x1", 0) .attr("y1", x0) .attr("x2", width) .attr("y2", x0) .transition() .duration(duration) .attr("y1", x1) .attr("y2", x1); //@onlywan 为中位线添加动作 medianLine.transition() .duration(duration) .attr("y1", x1) .attr("y2", x1); // Update whiskers. //@onlywan 为盒子两端虚线绑定数据 var whisker = g.selectAll("line.whisker") .data(whiskerData || []); //@onlywan 补充缺少的线，并为其绑定相关属性及动画 whisker.enter().insert("line", "circle, text") .attr("class", "whisker") .attr("x1", 0) .attr("y1", x0) .attr("x2", width) .attr("y2", x0) .style("opacity", 1e-6) .transition() .duration(duration) .attr("y1", x1) .attr("y2", x1) .style("opacity", 1); //@onlywan 为盒子两端虚线绑定动作 whisker.transition() .duration(duration) .attr("y1", x1) .attr("y2", x1) .style("opacity", 1); //@onlywan 去除多余的线 whisker.exit().transition() .duration(duration) .attr("y1", x1) .attr("y2", x1) .style("opacity", 1e-6) .remove(); // Update outliers. //@onlyan 为异常值绑定数据 var outlier = g.selectAll("circle.outlier") .data(outlierIndices, Number); //@onlywan 填补缺少的异常值圆圈，并设定其圆心，半径以及动画等属性 outlier.enter().insert("circle", "text") .attr("class", "outlier") .attr("r", 5) .attr("cx", width / 2) .attr("cy", function(i) return x0(d[i]); ) .style("opacity", 1e-6) .transition() .duration(duration) .attr("cy", function(i) return x1(d[i]); ) .style("opacity", 1); //@onlywan 为异常值点绑定动画 outlier.transition() .duration(duration) .attr("cy", function(i) return x1(d[i]); ) .style("opacity", 1); //@onlywan 去除多余的异常值元素 outlier.exit().transition() .duration(duration) .attr("cy", function(i) return x1(d[i]); ) .style("opacity", 1e-6) .remove(); // Compute the tick format. //@onlywan 坐标轴刻度格式化函数定义 var format = tickFormat || x1.tickFormat(8); // Update box ticks. //@onlywan 为盒子坐标刻度绑定数据 var boxTick = g.selectAll("text.box") .data(quartileData); //填补缺少的刻度文字及相关属性 boxTick.enter().append("text") .attr("class", "box") .attr("dy", ".3em") .attr("dx", function(d, i) return i & 1 ? 6 : -6 ) .attr("x", function(d, i) return i & 1 ? width : 0 ) .attr("y", x0) .attr("text-anchor", function(d, i) return i & 1 ? "start" : "end"; ) .text(format) .transition() .duration(duration) .attr("y", x1); //@onlywan 定义盒子刻度格式 boxTick.transition() .duration(duration) .text(format) .attr("y", x1); // Update whisker ticks. These are handled separately from the box // ticks because they may or may not exist, and we want don't want // to join box ticks pre-transition with whisker ticks post-. //@onlywan 虚线刻度数据绑定 var whiskerTick = g.selectAll("text.whisker") .data(whiskerData || []); //@onlywan 填补虚线刻度缺少的文字并设置相关属性 whiskerTick.enter().append("text") .attr("class", "whisker") .attr("dy", ".3em") .attr("dx", 6) .attr("x", width) .attr("y", x0) .text(format) .style("opacity", 1e-6) .transition() .duration(duration) .attr("y", x1) .style("opacity", 1); //@onlywan 虚线刻度设置相关属性 whiskerTick.transition() .duration(duration) .text(format) .attr("y", x1) .style("opacity", 1); //@onlywan 去除多余的虚线刻度 whiskerTick.exit().transition() .duration(duration) .attr("y", x1) .style("opacity", 1e-6) .remove(); ); //@onlywan 立刻执行当前没有延迟的计时，常用来处理闪屏问题 d3.timer.flush(); //@onlywan box的宽度属性设置函数 box.width = function(x) if (!arguments.length) return width; width = x; return box; ; //@onlywan box的高度属性设置函数 box.height = function(x) if (!arguments.length) return height; height = x; return box; ; //@onlywan box的刻度格式设置函数 box.tickFormat = function(x) if (!arguments.length) return tickFormat; tickFormat = x; return box; ; //@onlywan box的动作间隔设置函数 box.duration = function(x) if (!arguments.length) return duration; duration = x; return box; ; //@onlywan box的定义域设置函数 box.domain = function(x) if (!arguments.length) return domain; domain = x == null ? x : d3.functor(x); return box; ; //@onlywan box的value属性设置函数 box.value = function(x) if (!arguments.length) return value; value = x; return box; ; //@onlywan box的虚线设置函数 box.whiskers = function(x) if (!arguments.length) return whiskers; whiskers = x; return box; ; //@onlywan box的分位数设置函数 box.quartiles = function(x) if (!arguments.length) return quartiles; quartiles = x; return box; ; //@onlywan 最终返回box对象 return box; ; //@onlywan 获取whisker值在数组d中的index值 function boxWhiskers(d) return [0, d.length - 1]; //@onlywan d3.quantile(array, p[, accessor])函数是用来获取排好序的数组的一个分位数 function boxQuartiles(d) return [ d3.quantile(d, .25), //@onlywan 获取已排序数组d的 下四分位数 d3.quantile(d, .5), //@onlywan 获取已排序数组d的 中位数 d3.quantile(d, .75) //@onlywan 获取已排序数组d的 上四分位数 ]; )();index.html文件解读 —— [ 源码 ]
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
.box
font: 10px sans-serif;
.box line,
.box rect,
.box circle
fill: #fff;
stroke: #000;
stroke-width: 1.5px;
.box .center
stroke-dasharray: 3,3;
.box .outlier
fill: none;
stroke: #ccc;
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="box.js"></script>
<script>
var margin = top: 10, right: 50, bottom: 20, left: 50,
width = 120 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var min = Infinity,
max = -Infinity;
//@onlywan 初始化箱形图
var chart = d3.box()
.whiskers(iqr(1.5))
.width(width)
.height(height);
d3.csv("morley.csv", function(error, csv)
if (error) throw error;
var data = [];
//@onlywan 生成 data[]数组
csv.forEach(function(x)
var e = Math.floor(x.Expt - 1),
r = Math.floor(x.Run - 1),
s = Math.floor(x.Speed),
d = data[e];
if (!d) d = data[e] = [s];
else d.push(s);
if (s > max) max = s;
if (s < min) min = s;
);
//@onlywan 定义箱形图的 定义域
chart.domain([min, max]);
//@onlywan 生成svg元素，给其绑定数据为data数组，并且设置相关的属性
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "box")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.append("g") //@onlywan 此处追加一个group元素
//@onlywan 转换坐标
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(chart);//@onlywan 将svg元素给chart函数
setInterval(function()
//@onlywan 为svg赋予新的随机数组值,此处用datum函数来一次性为5个svg图赋值，并执行chart函数
svg.datum(randomize).call(chart.duration(1000));
, 2000);
);
//@onlywan 功能函数，用于变换d
function randomize(d)
if (!d.randomizer) d.randomizer = randomizer(d);
return d.map(d.randomizer);
//@onlywan 功能函数，用于变换d
function randomizer(d)
var k = d3.max(d) * .02;
return function(d)
return Math.max(min, Math.min(max, d + k * (Math.random() - .5)));
;
// Returns a function to compute the interquartile range.
//@onlywan 功能函数，用来计算四分位差，interquartile range ,即IQR，表示四分位差
function iqr(k)
return function(d, i)
var q1 = d.quartiles[0],
q3 = d.quartiles[2],
iqr = (q3 - q1) * k,
i = -1,
j = d.length;
while (d[++i] < q1 - iqr);
while (d[--j] > q3 + iqr);
return [i, j];
;
</script>d3官网对于box plot 图给出的数据是 著名的迈克尔逊-莫雷实验 迈克耳孙－莫雷实验的数据，共5组实验，每组中20个数据，5组实验对应箱形图中5个盒子。【个人理解】
终于把第一个图读完了，今天是黑色星期五之后的星期日，天气还算可以。
以上是关于D3.js 中 Box Plots详解的主要内容，如果未能解决你的问题，请参考以下文章