D3.js 中 Box Plots详解

2024-02-01 06:20
文章标签 详解 js box d3 plots

本文主要是介绍D3.js 中 Box Plots详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Box Plot

聊聊box plot，将自己阅读、理解d3.js的箱形图源码的过程和思路记录下来……

箱形图（Box-plot）又称为盒须图、盒式图或箱线图，是一种用作显示一组数据分散情况资料的统计图。因形状如箱子而得名。在各种领域也经常被使用，常见于品质管理。 —— [ 百度百科 ]

话不多少，先睹为快，用d3实现的箱形图如图1所示：

图1 箱形图的样图

眨一看，箱形图有点难懂，图中的盒子，以及各种线段上标注的数字，还有那莫名奇妙的小空心圆圈什么意思？其实，我第一眼看也是一脸蒙，接着就查阅相关资料，搞明白了这张神秘的图，请看图2，保证您一秒懂什么是箱形图。

图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详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/666322。

相关文章

Debezium 与 Apache Kafka 的集成方式步骤详解

Debezium 与 Apache Kafka 的集成方式步骤详解

《Debezium与ApacheKafka的集成方式步骤详解》本文详细介绍了如何将Debezium与ApacheKafka集成,包括集成概述、步骤、注意事项等,通过KafkaConnect,D... 目录一、集成概述二、集成步骤1. 准备 Kafka 环境2. 配置 Kafka Connect3. 安装 D
阅读更多...
Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
Spring Cloud LoadBalancer 负载均衡详解

Spring Cloud LoadBalancer 负载均衡详解

《SpringCloudLoadBalancer负载均衡详解》本文介绍了如何在SpringCloud中使用SpringCloudLoadBalancer实现客户端负载均衡,并详细讲解了轮询策略和... 目录1. 在 idea 上运行多个服务2. 问题引入3. 负载均衡4. Spring Cloud Load
阅读更多...
Springboot中分析SQL性能的两种方式详解

Springboot中分析SQL性能的两种方式详解

《Springboot中分析SQL性能的两种方式详解》文章介绍了SQL性能分析的两种方式：MyBatis-Plus性能分析插件和p6spy框架,MyBatis-Plus插件配置简单,适用于开发和测试环... 目录SQL性能分析的两种方式:功能介绍实现方式:实现步骤:SQL性能分析的两种方式:功能介绍记录
阅读更多...
在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

《如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解》：本文主要介绍如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别的相关资料,描述了如何使用海康威视设备网络SD... 目录前言开发流程问题和解决方案dll库加载不到的问题老旧版本sdk不兼容的问题关键实现流程总结前言作为
阅读更多...
SQL 中多表查询的常见连接方式详解

SQL 中多表查询的常见连接方式详解

《SQL中多表查询的常见连接方式详解》本文介绍SQL中多表查询的常见连接方式,包括内连接（INNERJOIN）、左连接（LEFTJOIN）、右连接（RIGHTJOIN）、全外连接（FULLOUTER... 目录一、连接类型图表（ASCII 形式）二、前置代码（创建示例表）三、连接方式代码示例1. 内连接（I
阅读更多...
Go路由注册方法详解

Go路由注册方法详解

《Go路由注册方法详解》Go语言中,http.NewServeMux()和http.HandleFunc()是两种不同的路由注册方式,前者创建独立的ServeMux实例,适合模块化和分层路由,灵活性高... 目录Go路由注册方法1. 路由注册的方式2. 路由器的独立性3. 灵活性4. 启动服务器的方式5.
阅读更多...
Java中八大包装类举例详解(通俗易懂)

Java中八大包装类举例详解(通俗易懂)

《Java中八大包装类举例详解(通俗易懂)》：本文主要介绍Java中的包装类,包括它们的作用、特点、用途以及如何进行装箱和拆箱,包装类还提供了许多实用方法,如转换、获取基本类型值、比较和类型检测,... 目录一、包装类（Wrapper Class）1、简要介绍2、包装类特点3、包装类用途二、装箱和拆箱1、装
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2