d3实现箱形图图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：d3实现箱形图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background: hsl(0, 0%, 97%);
	color: hsl(0, 0%, 7%);
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
		helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
	min-height: 100vh;
	display: flex;
}

svg {
	margin: auto;
	width: 90vmin;
	max-width: 46rem;
	height: auto;
}
</style>



</head>

<body >
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.7.6.1.js"></script>
      <script >
const data = [
	{ observation: 1, experiment: 1, run: 1, speed: 850 },
	{ observation: 2, experiment: 1, run: 2, speed: 740 },
	{ observation: 3, experiment: 1, run: 3, speed: 900 },
	{ observation: 4, experiment: 1, run: 4, speed: 1070 },
	{ observation: 5, experiment: 1, run: 5, speed: 930 },
	{ observation: 6, experiment: 1, run: 6, speed: 850 },
	{ observation: 7, experiment: 1, run: 7, speed: 950 },
	{ observation: 8, experiment: 1, run: 8, speed: 980 },
	{ observation: 9, experiment: 1, run: 9, speed: 980 },
	{ observation: 10, experiment: 1, run: 10, speed: 880 },
	{ observation: 11, experiment: 1, run: 11, speed: 1000 },
	{ observation: 12, experiment: 1, run: 12, speed: 980 },
	{ observation: 13, experiment: 1, run: 13, speed: 930 },
	{ observation: 14, experiment: 1, run: 14, speed: 650 },
	{ observation: 15, experiment: 1, run: 15, speed: 760 },
	{ observation: 16, experiment: 1, run: 16, speed: 810 },
	{ observation: 17, experiment: 1, run: 17, speed: 1000 },
	{ observation: 18, experiment: 1, run: 18, speed: 1000 },
	{ observation: 19, experiment: 1, run: 19, speed: 960 },
	{ observation: 20, experiment: 1, run: 20, speed: 960 },
	{ observation: 21, experiment: 2, run: 1, speed: 960 },
	{ observation: 22, experiment: 2, run: 2, speed: 940 },
	{ observation: 23, experiment: 2, run: 3, speed: 960 },
	{ observation: 24, experiment: 2, run: 4, speed: 940 },
	{ observation: 25, experiment: 2, run: 5, speed: 880 },
	{ observation: 26, experiment: 2, run: 6, speed: 800 },
	{ observation: 27, experiment: 2, run: 7, speed: 850 },
	{ observation: 28, experiment: 2, run: 8, speed: 880 },
	{ observation: 29, experiment: 2, run: 9, speed: 900 },
	{ observation: 30, experiment: 2, run: 10, speed: 840 },
	{ observation: 31, experiment: 2, run: 11, speed: 830 },
	{ observation: 32, experiment: 2, run: 12, speed: 790 },
	{ observation: 33, experiment: 2, run: 13, speed: 810 },
	{ observation: 34, experiment: 2, run: 14, speed: 880 },
	{ observation: 35, experiment: 2, run: 15, speed: 880 },
	{ observation: 36, experiment: 2, run: 16, speed: 830 },
	{ observation: 37, experiment: 2, run: 17, speed: 800 },
	{ observation: 38, experiment: 2, run: 18, speed: 790 },
	{ observation: 39, experiment: 2, run: 19, speed: 760 },
	{ observation: 40, experiment: 2, run: 20, speed: 800 },
	{ observation: 41, experiment: 3, run: 1, speed: 880 },
	{ observation: 42, experiment: 3, run: 2, speed: 880 },
	{ observation: 43, experiment: 3, run: 3, speed: 880 },
	{ observation: 44, experiment: 3, run: 4, speed: 860 },
	{ observation: 45, experiment: 3, run: 5, speed: 720 },
	{ observation: 46, experiment: 3, run: 6, speed: 720 },
	{ observation: 47, experiment: 3, run: 7, speed: 620 },
	{ observation: 48, experiment: 3, run: 8, speed: 860 },
	{ observation: 49, experiment: 3, run: 9, speed: 970 },
	{ observation: 50, experiment: 3, run: 10, speed: 950 },
	{ observation: 51, experiment: 3, run: 11, speed: 880 },
	{ observation: 52, experiment: 3, run: 12, speed: 910 },
	{ observation: 53, experiment: 3, run: 13, speed: 850 },
	{ observation: 54, experiment: 3, run: 14, speed: 870 },
	{ observation: 55, experiment: 3, run: 15, speed: 840 },
	{ observation: 56, experiment: 3, run: 16, speed: 840 },
	{ observation: 57, experiment: 3, run: 17, speed: 850 },
	{ observation: 58, experiment: 3, run: 18, speed: 840 },
	{ observation: 59, experiment: 3, run: 19, speed: 840 },
	{ observation: 60, experiment: 3, run: 20, speed: 840 },
	{ observation: 61, experiment: 4, run: 1, speed: 890 },
	{ observation: 62, experiment: 4, run: 2, speed: 810 },
	{ observation: 63, experiment: 4, run: 3, speed: 810 },
	{ observation: 64, experiment: 4, run: 4, speed: 820 },
	{ observation: 65, experiment: 4, run: 5, speed: 800 },
	{ observation: 66, experiment: 4, run: 6, speed: 770 },
	{ observation: 67, experiment: 4, run: 7, speed: 760 },
	{ observation: 68, experiment: 4, run: 8, speed: 740 },
	{ observation: 69, experiment: 4, run: 9, speed: 750 },
	{ observation: 70, experiment: 4, run: 10, speed: 760 },
	{ observation: 71, experiment: 4, run: 11, speed: 910 },
	{ observation: 72, experiment: 4, run: 12, speed: 920 },
	{ observation: 73, experiment: 4, run: 13, speed: 890 },
	{ observation: 74, experiment: 4, run: 14, speed: 860 },
	{ observation: 75, experiment: 4, run: 15, speed: 880 },
	{ observation: 76, experiment: 4, run: 16, speed: 720 },
	{ observation: 77, experiment: 4, run: 17, speed: 840 },
	{ observation: 78, experiment: 4, run: 18, speed: 850 },
	{ observation: 79, experiment: 4, run: 19, speed: 850 },
	{ observation: 80, experiment: 4, run: 20, speed: 780 },
	{ observation: 81, experiment: 5, run: 1, speed: 890 },
	{ observation: 82, experiment: 5, run: 2, speed: 840 },
	{ observation: 83, experiment: 5, run: 3, speed: 780 },
	{ observation: 84, experiment: 5, run: 4, speed: 810 },
	{ observation: 85, experiment: 5, r.........完整代码请登录后点击上方下载按钮下载查看