这里写自定义目录标题
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>海贼王知识图谱可视化</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="">
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<!-- 定义样式 -->
<style>
/*body的样式*/
body {
background-color: #272b30; /*背景颜色*/
padding-bottom: 30px, 40px;
text-align: center;
font-family: OpenSans-Light, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
}
/*之前在js代码里面定义了classes,这边就给这些写样式*/
.links line {
stroke: rgb(240, 240, 240); /*线的颜色*/
stroke-opacity: 0.2; /*线的透明度*/
}
.links line.inactive {
/*display: none !important;*/
stroke-opacity: 0;
}
.linetexts {
fill-opacity: 0;
font-size: 8px ;
font-family: SimSun;
fill:#fff;
}
.linetexts.inactive {
display: none !important;
}
.nodes circle {
stroke: #fff;
stroke-width: 1; /*圆的描边宽度*/
}
.nodes circle:hover {
cursor: pointer;
}
.nodes circle.inactive {
display: none !important;
}
/*默认显示所有的圆圈,进入模式切换之后才会显示text*/
.texts text {
display: none;
}
.texts text:hover {
cursor: pointer;
}
.texts text.inactive {
display: none !important;
}
/*indicator的样式*/
#indicator {
position: absolute;
left: 60px;
bottom: 120px;
text-align: left;
color: #f2f2f2;
font-size: 12px;
}
/*indicator中每一个小的div/色块/图例的样式*/
#indicator>div {
margin-bottom: 4px;
}
#indicator span {
display: inline-block;
width: 30px;
height: 14px;
position: relative;
top: 2px;
margin-right: 8px;
}
/*mode-模式切换的style*/
#mode {
position: absolute;
top: 160px;
left: 60px;
}
#mode span {
display: inline-block;
border: 1px solid #fff;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
font-size: 14px;
transition: color, background-color .3s; /*CSS3中的渐变*/
-o-transition: color, background-color .3s;
-ms-transition: color, background-color .3s;
-moz-transition: color, background-color .3s;
-webkit-transition: color, background-color .3s;
}
/*当按键处于激活或者鼠标悬浮状态的时候*/
#mode span.active, #mode span:hover {
background-color: #fff;
color: #333;
cursor: pointer;
}
/*info的样式*/
#info {
position: absolute;
top: 160px;
/*bottom: 40px;*/
right: 30px;
text-align: right;
width: 270px;
}
#info p {
color: #fff;
font-size: 12px;
margin-top: 0px;
margin-bottom: 5px;
}
#info p span {
color: #888;
margin-right: 10px;
}
/*搜索框的样式*/
#search input {
position: absolute;
top: 210px;
left: 60px;
color: #fff;
border: none;
outline: none;
box-shadow: none;
width: 200px;
background-color: #666;
}
</style>
<body>
<!-- 标题 -->
<h1 style="color: #fff;font-size: 32px;margin-bottom: 0px;text-align: left;margin-left: 40px">ONE PIECE</h1>
<!-- 定义div存放关系图 -->
<!-- NOTE: 父元素采用相对定位,里面的元素采用绝对定位 -->
<div style="text-align: center;position: relative;">
<svg width="800" height="560" style="margin-left: 80px;margin-bottom: -40px" id="svg1"></svg>
<!-- 图例 -->
<div id="indicator"></div>
<!-- 模式 -->
<div id="mode">
<span class="active" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">Circles</span>
<span style="border-top-left-radius: 0;border-bottom-left-radius: 0;position: relative;left: -5px;">Texts</span>
</div>
<!-- 搜索框 -->
<div id="search">
<input type="text" autocomplete="off" class="form-control">
</div>
<!-- 每个结点的信息 -->
<!-- <div id="info">
<h4></h4>
</div> -->
</div>
</body>
<script src="./relation.js"> </script>
<script src="./avpair.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- 自定义的js代码 -->
<script>
$(document).ready(function() {
console.log(MapData,9999)
// 定义svg变量,选出第一个图
var svg = d3.select("#svg1"),
width = svg.attr('width'),
height = svg.attr('height');
var names = ['人', '地点', '恶魔果实', '组织', '船只', '职务', '事件']
var colors = ['red', 'green', 'yellow', '#d2907c', '#d6744d', '#ded295', '#7481c3'];
// var outlier_avatar_ID = ['0001', '0002', '0003', '0004', '0005', '0006', '0007', '0008', '0009', '0