d3+venn实现带提示交互效果的韦恩图和欧拉图图表代码
代码语言:html
所属分类:图表
代码描述:d3+venn实现带提示交互效果的韦恩图和欧拉图图表代码
代码标签: d3 venn 提示 交互 韦恩图 欧拉图 图表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intersection Tooltip venn.js example</title>
<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div id="venn"></div>
</body>
<style>
.venntooltip {
position: absolute;
text-align: center;
width: 128px;
height: 16px;
background: #333;
color: #ddd;
padding: 2px;
border: 0px;
border-radius: 8px;
opacity: 0;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/venn.js"></script>
<script>
var sets = [
{"sets": [0], "label": "Radiohead", "size": 77348},
{"sets": [1], "label": "Thom Yorke", "size": 5621},
{"sets": [2], "label": "John Lennon", "size": 7773},
{"sets": [3], "label": "Kanye West", "size": 27053},
{"sets": [4], "label": "Eminem", "size": 19056},
{"sets": [5], "label": "Elvis Presley", "size": 15839},
{"sets": [6], "label": "Explosions in the Sky", "size": 10813},
{"sets": [7], "label": "Bach", "size": 9264},
{"sets": [8], "label": "Mozart", "size": 3959},
{"sets": [9], "label": "Philip Glass", "size": 4793},
{"sets": [10], "label": "St. Germain", "size": 4136},
{"sets": [11], "label": "Morrissey", "size": 10945},
{"sets": [12], "label": "Outkast", "size": 8444},
{"sets": [0, 1], "size": 4832},
{"sets": [0, 2], "size": 2602},
{"sets": [0, 3], "size": 6141},
{"sets": [0, 4], "size": 2723},
{"sets": [0, 5], "size": 3177},
{"sets": [0, 6], "size": 5384},
{"sets": [0, 7], "size": 2252},
{"sets": [0, 8], "size": 877},
{"sets": [0, 9], "size": 1663},
{"sets": [0, 10], "size": 899},
{"sets": [0, 11], "size": 4557},
{"sets": [0, 12], "size": 2332},
{"sets": [1, 2], "size": 162},
{"sets": [1, 3], "size": 396},
{"sets": [1, 4], "size": 133},
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0