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

d3实现箱形图图表效果代码

代码语言：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, experim.........完整代码请登录后点击上方下载按钮下载查看