使⽤d3.js知识图谱数据可视化（⼀）这⾥写⾃定义⽬录标题
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="libs.baidu/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 >ONE PIECE</h1>
<!-- 定义div存放关系图 -->
<!-- NOTE: ⽗元素采⽤相对定位，⾥⾯的元素采⽤绝对定位 -->
<div >
<svg width="800" height="560" id="svg1"></svg>
<!-- 图例 -->
<div id="indicator"></div>
<!-- 模式 -->
<div id="mode">
<span class="active" >Circles</span>
<span >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="/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', '0177', '0377', '0378', '0659'];
for (var i = 0; i < names.length; i++) {
// 选中indicator，每⼀种都append⼀个div，就是前⾯的⼩⾊块
$('#indicator').append("<div><span style='background-color:" + colors[i] + "'></span>" + names[i] +"</div>")
}
// 定义D3的simulation是如何展⽰出来的
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
// 存之后⽣成的关系图数据
var graph;
// d3.json("vizdata_vivrecard_relation.json", function(error, data) {
// d3.json("test_vizdata_vivrecard_relation.json", function(error, data) {
// d3.json("relation.json", function(error, data) {
//    if (error) throw error;
graph = MapData;
// console.log(graph)
// D3数据驱动⽂档
// ⽤links去驱动line的线宽
var link = svg.append('g')
.attr("class", "links")
.
selectAll("line")
.data(graph.links)
.enter().append("line")
.attr('stroke-width', function(d){
// return Math.sqrt(d.value);
return 1;
});
//边上的⽂字（实体之间的关系）
var linktext = svg.append('g')
.attr("class", "linetexts")
.selectAll("text")
.
data(graph.links)
.enter()
.append("text")
.style("display","block")
.style("color","red")
.text(function(d){
lation;
});
// 添加所有的node
var node = svg.append('g')
.attr('class', 'nodes')
.
selectAll('circle')
.des)
.enter().append('circle')
.attr("r", function(d) {
return d.size
})
.attr('fill', function(d){ // 填充的颜⾊
return up];
})
.attr('stroke', 'none')    // 没有描边
.attr('name', function(d){
return d.id;
})
.call(d3.drag()            // 绑定d3的拖动函数
.on("start", dragstarted) // 拖动开始
.on("drag", dragged)      // 拖动进⾏
.on("end", dragended));  // 拖动结束
// ⽂本
// 两种显⽰模式，每个结点可以⽤⼀个圆或者⽂本表⽰        var text = svg.append('g')
.attr("class", "texts")
.selectAll("text")
.des)
.
enter().append("text")
.attr("font-size", function(d) {
return d.size
})
.attr("fill", function(d) {
return up];
})
.attr('name', function(d) {
return d.id;
})
.text(function(d) {
return d.id;
})
.attr('text-anchor', 'middle')
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
svg图// 给node加title, 当⿏标悬浮在圆圈上的时候
node.append('title').text(function(d){
return d.id;
})
/
/ 处理缩放
svg.()
.scaleExtent([1 / 8, 8])
.on("zoom", zoomed));
function zoomed() {
link.attr("transform", ansform);
node.attr("transform", ansform);
text.attr("transform", ansform);
linktext.attr('transform', ansform);
}
simulation
.
des)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。