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 {
	color: hsl(38, 100%, 95%);
	background: hsl(345, 5%, 15%);
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
		helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
}

#root {
	width: 100%;
	max-width: 78rem;
	margin: 1rem auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2rem;
}

#root > #controls {
	max-width: 42rem;
}

#root > #viz {
	width: 100%;
}

#controls {
	display: grid;
	grid-template-columns: repeat(4, auto);
}

#controls button {
	text-transform: capitalize;
	color: inherit;
	border: 0.1rem dashed currentColor;
	margin-left: -0.025rem;
	margin-right: -0.025rem;
	border-radius: 0;
	background: none;
	padding: 0.4rem 0.8rem;
	font-family: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

#controls button.active {
	background: hsla(38, 100%, 95%, 0.035);
	border-style: solid;
}

#viz {
	position: relative;
}

#viz > #tooltip {
	position: absolute;
	pointer-events: none;
	transform: translate(-50%, -100%);
}

#tooltip {
	width: max-content;
	color: hsl(345, 5%, 15%);
	background: hsla(38, 100%, 95%, 0.95);
	display: inline-flex;
	align-items: center;
	column-gap: 0.5rem;
	padding: 0.65rem 0.75rem;
	font-size: 0.9rem;
}

#tooltip h2 {
	font-weight: 400;
	font-size: 1em;
}
</style>



</head>

<body  >
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.7.6.1.js"></script>
      <script >
const data = [
{
  label: "Styled Components",
  color: "hsl(231, 81%, 60%)",
  satisfaction: [
  { year: 2019, ranking: 3, percentage: 0.85 },
  { year: 2020, ranking: 2, percentage: 0.821 },
  { year: 2021, ranking: 4, percentage: 0.766 }],

  interest: [
  { year: 2019, ranking: 2, percentage: 0.677 },
  { year: 2020, ranking: 2, percentage: 0.601 },
  { year: 2021, ranking: 5, percentage: 0.541 }],

  usage: [
  { year: 2019, ranking: 1, percentage: 0.397 },
  { year: 2020, ranking: 1, percentage: 0.516 },
  { year: 2021, ranking: 1, percentage: 0.523 }],

  awareness: [
  { year: 2019, ranking: 1, percentage: 0.791 },
  { year: 2020, ranking: 1, percentage: 0.857 },
  { year: 2021, ranking: 1, percentage: 0.869 }] },


{
  label: "JSS",
  color: "hsl(180, 54%, 52%)",
  satisfaction: [
  { year: 2019, ranking: 5, percentage: 0.593 },
  { year: 2020, ranking: 8, percentage: 0.579 },
  { year: 2021, ranking: 13, percentage: 0.503 }],

  interest: [
  { year: 2019, ranking: 5, percentage: 0.379 },
  { year: 2020, ranking: 9, percentage: 0.369 },
  { year: 2021, ranking: 13, percentage: 0.302 }],

  usage: [
  { year: 2019, ranking: 5, percentage: 0.068 },
  { year: 2020, ranking: 5, percentage: 0.144 },
  { year: 2021, ranking: 5, percentage: 0.14 }],

  awareness: [
  { year: 2019, ranking: 4, percentage: 0.309 },
  { year: 2020, ranking: 4, percentage: 0.474 },
  { year: 2021, ranking: 5, percentage: 0.486 }] },


{
  label: "Styled JSX",
  color: "hsl(338, 83%, 62%)",
  satisfaction: [
  { year: 2019, ranking: 4, percentage: 0.672 },
  { year: 2020, ranking: 6, percentage: 0.681 },
  { year: 2021, ranking: 11, percentage: 0.616 }],

  interest: [
  { year: 2019, ranking: 4, percentage: 0.446 },
  { year: 2020, ranking: 7, percentage: 0.408 },
  { year: 2021, ranking: 11, percentage: 0.36 }],

  usage: [
  { year: 2019, ranking: 3, percentage: 0.137 },
  { year: 2020, ranking: 3, percentage: 0.265 },
  { year: 2021, ranking: 3, percentage: 0.25 }],

  awareness: [
  { year: 2019, ranking: 3, percentage: 0.443 },
  { year: 2020, ranking: 3, percentage: 0.622 },
  { year: 2021, ranking: 3, percentage: 0.631 }] },


{
  label: "Emotion",
  color: "hsl(0, 99%, 71%)",
  satisfaction: [
  { year: 2019, ranking: 1, percentage: 0.866 },
  { year: 2020, ranking: 3, percentage: 0.797 },
.........完整代码请登录后点击上方下载按钮下载查看