[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边
前面作者讲解了很多知识图谱原理知识，包括知识图谱相关技术、Neo4j绘制关系图谱等，但仍缺少一个系统全面的实例。为了加深自己对知识图谱构建的认识，为后续创建贵州旅游知识图谱打下基础，作者深入学习了张宏伦老师的网易云课程（星球系列电影），并结合自己的理解和技术分享了该系列专栏，从数据采集、数据展示、数据分析到知识图谱构建，文章后续还会讲解中文数据的实体识别、关系抽取、知识计算等。
前文介绍了Python3抓取电影实体知识，Seaborn可视化展示电影信息，D3可视化布局，关系图谱基本构建。本篇文章将实现如下图所示的功能，主要包括：
1.建立两种模式，点击“节点”显示所有圆，点击“文字”显示实体名称
2.添加鼠标响应事件，选中某一个节点显示其相关的节点及边
3.鼠标放开恢复所有节点
代码下载地址：https://download.csdn.net/download/eastmount/10955369
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第1张图片](http://img.e-com-net.com/image/info8/21cf8347490641538760e57fbfe2537e.jpg)
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第2张图片](http://img.e-com-net.com/image/info8/5e08d8a9bdcd41fbb857b18d44d91ae0.jpg)
这是一系列基础性文章，希望对您有所帮助 ，尤其是对知识图谱感兴趣和编程刚入门的同学。同时也因为最近准备博士考试，做题做吐了，写点新专栏调节下心情，与君共勉，一起加油。
前文：
[知识图谱实战篇] 一.数据抓取之Python3抓取JSON格式的电影实体
[知识图谱实战篇] 二.Json+Seaborn可视化展示电影实体
[知识图谱实战篇] 三.Python提取JSON数据、HTML+D3构建基本可视化布局
[知识图谱实战篇] 四.HTML+D3+CSS绘制关系图谱
文章目录
- 一.HTML和CSS添加两个span节点
- 二.D3实现两种模式下的图形切换
- 三.D3鼠标事件显示相关联的节点
- 1.设置鼠标选中节点显示
- 2.循环设置与选中节点相关联的节点显示
- 四.D3鼠标事件显示相关联的边
- 五.D3实现鼠标移开图形还原
- 六.D3实现文字部分鼠标事件
- 最终完整代码
- 闲话
推荐作者的知识图谱前文：
知识图谱相关会议之观后感分享与学习总结
中文知识图谱研讨会的学习总结 (上) 图谱引入、百度知心、搜狗知立方
搜索引擎和知识图谱那些事 (上).基础篇
基于VSM的命名实体识别、歧义消解和指代消解
CSDN下载-第一届全国中文知识图谱研讨会演讲PPT 清华大学
CSDN下载-知识图谱PDF资料 清华大学知识图谱研讨会汇报PPT
[知识图谱构建] 一.Neo4j图数据库安装初识及药材供应图谱实例
[知识图谱构建] 二.《Neo4j基础入门》基础学习之创建图数据库节点及关系
[关系图谱] 一.Gephi通过共线矩阵构建知网作者关系图谱
[关系图谱] 二.Gephi导入共线矩阵构建作者关系图谱
再次强烈推荐大家阅读张宏伦老师的网易云课程及Github源码，受益匪浅。
https://github.com/Honlan/starwar-visualization/tree/master/star_war
https://study.163.com/course/courseLearn.htm?courseId=1003528010
一.HTML和CSS添加两个span节点
首先在HTML中添加两个可选择的选项span，显示两类图形，设置圆角样式，核心代码如下：
<div id="mode">
<span class="active" style="border-top-right-radius:0;border-bottom-right-radius:0;">节点span>
<span style="border-top-left-radius:0;border-bottom-left-radius:0;position:relative;left:-5px;">文字span>
div>
接着添加CSS代码设置样式，对应两个按钮。
- mode的样式，包括绝对定位、边距等。
- 设置mode中span样式：增加一个白色边框，字体颜色白色，边距，圆角，字体大小。
- 设置鼠标悬停的效果（鼠标激活、悬浮状态）：背景颜色白色，字体设置为黑色，鼠标样式pointer。
- 在#mode span中增加CSS3的transition，鼠标悬停时会增加一个渐变的效果。
<style type="text/css">
#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;
-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;
}
style>
此时的运行结果如下图所示，鼠标悬背景色和字体颜色改变。
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第3张图片](http://img.e-com-net.com/image/info8/ad49c420cfb44397b95b9674bb4cc9b9.jpg)
此时完整代码如下：
<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="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js">script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">script>
head>
<style type="text/css">
body {
background-color: #272b30;
padding: 30px 40px;
text-align: center;
font-family: OpenSans-Light, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
}
#indicator {
position: absolute;
left: 60px;
bottom: 120px;
text-align: left;
color: #f2f2f2;
font-size: 12px;
}
#indicator>div {
margin-bottom: 4px;
}
#indicator span {
display: inline-block;
width: 30px;
height: 14px;
position: relative;
top: 2px;
margin-right: 8px;
}
.links line {
stroke: rgb(240, 240, 240);
stroke-opactity: 0.2;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.texts text {
display: none;
}
#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;
-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;
}
style>
<body>
<h1 style="color:#fff;font-size:32px;margin-bottom:0px;text-align:center;margin-left:40px;">Star Warsh1>
<div style="text-align: center; position:relative;">
<svg width="800" height="560" style="margin-right: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;">节点span>
<span style="border-top-left-radius:0;border-bottom-left-radius:0;position:relative;left:-5px;">文字span>
div>
<div id="search">
div>
<div id="info">
div>
div>
<div style="text-align: center; position:relative;">
<svg width="960" height="240" style="margin-right:60px;margin-bottom:-40px;" id="svg1">
<g>g>
svg>
div>
body>
<script src="https://d3js.org/d3.v4.min.js">script>
<script type="text/javascript">
$(document).ready(function() {
//定义svg变量将布局svg1选出来
var svg = d3.select("#svg1"),
width = svg.attr("width"),
height = svg.attr("height");
//定义name变量制作图标
var names = ['Films', 'Characters', 'Planets', 'Starships', 'Vehicles', 'Species'];
var colors = ['#6ca46c', '#4e88af', '#ca635f', '#d2907c', '#d6744d', '#ded295'];
//背景颜色设置 补充CSS样式设置字体布局
for (var i=0; i < names.length; i++) {
$('#indicator').append("" + names[i] + "");
}
//利用d3.forceSimulation()定义关系图 包括设置边link、排斥电荷charge、关系图中心点
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请求python处理好的节点及边 请求成功返回数据，否则报错
d3.json("starwar_alldata.json", function(error, data) {
if(error) throw error;
graph = data;
console.log(graph);
//D3映射数据至HTML中
//g用于绘制所有边,selectALL选中所有的line,并绑定数据data(graph.links),enter().append("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; //所有线宽度均为1
});
//添加所有的点
//selectAll("circle")选中所有的圆并绑定数据,圆的直径为d.size
//再定义圆的填充色,同样数据驱动样式,圆没有描边,圆的名字为d.id
//call()函数：拖动函数,当拖动开始绑定dragstarted函数，拖动进行和拖动结束也绑定函数
var node = svg.append("g").attr("class", "nodes").selectAll("circle").data(graph.nodes).enter()
.append("circle").attr("r", function(d) {
return d.size;
}).attr("fill", function(d) {
return colors[d.group];
}).attr("stroke", "none").attr("name", function(d) {
return d.id;
}).call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
//显示所有的文本
//设置大小、填充颜色、名字、text()设置文本
//attr("text-anchor", "middle")文本居中
var text = svg.append("g").attr("class", "texts").selectAll("text").data(graph.nodes).enter()
.append("text").attr("font-size", function(d) {
return d.size;
}).attr("fill", function(d) {
return colors[d.group];
}).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)
);
//圆增加title
node.append("title").text(function(d) {
return d.id;
})
//simulation中ticked数据初始化，并生成图形
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
//ticked()函数确定link线的起始点x、y坐标 node确定中心点 文本通过translate平移变化
function ticked() {
link
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
text.
attr('transform', function(d) {
return 'translate(' + d.x + ',' + (d.y + d.size / 2) + ')';
});
}
});
// Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension
// 本地json数据需要放置服务器中请求 XAMPP
//拖动函数代码
var dragging = false;
//开始拖动并更新相应的点
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
dragging = true;
}
//拖动进行中
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
//拖动结束
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
dragging = false;
}
});
script>
html>
二.D3实现两种模式下的图形切换
接着通过JavaScript添加两种模式切换事件，核心代码如下：
<script type="text/javascript">
...
//span点击事件
$('#mode span').click(function(event) {
//span都设置为不激活状态
$('#mode span').removeClass('active');
//点击的span被激活
$(this).addClass('active');
//text隐藏 nodes显示
if ($(this).text() == '节点') {
$('.texts text').hide();
$('.nodes circle').show();
} else {
$('.texts text').show();
$('.nodes circle').hide();
}
});
...
script>
显示结果如下图所示：
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第4张图片](http://img.e-com-net.com/image/info8/b04dbcfebd6f43f7988262bc7b78619a.gif)
三.D3鼠标事件显示相关联的节点
接着设置鼠标选中某个节点，其相关联的节点显示的效果。
1.设置鼠标选中节点显示
首先通过CSS设置节点圆的悬停样式和强制不显示（display: none !important），其中边设置隐藏为另一种方法：透明度为0（stroke-opacity: 0）。
注意：inactive样式JavaScript中会调用。核心代码如下：
.nodes circle:hover {
cursor: pointer;
}
.nodes circle.inactive {
display: none !important;
}
.texts text:hover {
cursor: pointer;
}
.texts text.inactive {
display: none !important;
}
.links line.inactive {
/*display: none !important;*/
stroke-opacity: 0;
}
下面函数是为svg1父元素下的.nodes circle元素绑定鼠标进入事件，选中的节点则显示。获取被鼠标选中元素的名字name，当前节点显示其他节点隐藏，隐藏对应前面的CSS样式：
.nodes circle.inactive { display: none !important; }
//为svg1父元素下的.nodes circle元素绑定鼠标进入事件
$('#svg1').on('mouseenter', '.nodes circle', function(event) {
//获取被选中元素的名字
var name = $(this).attr("name");
//选择#svg1 .nodes中所有的circle，再增加个class
d3.select('#svg1 .nodes').selectAll('circle').attr('class', function(d) {
//数据的id是否等于name,返回空
if(d.id==name) {
return '';
}
//当前节点返回空，其他节点被隐藏起来(CSS设置隐藏)
else {
return "inactive"; //前面CSS定义 .nodes circle.inactive
}
});
});
此时输出结果如下图所示：
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第5张图片](http://img.e-com-net.com/image/info8/6a63b2528abf4a229a789634cf0ce069.jpg)
2.循环设置与选中节点相关联的节点显示
循环遍历所有节点，如果links的起点等于name，并且终点等于正在处理的节点则显示，否则则隐藏，从而实现与选中节点相关联的节点均显示。核心代码如下：
<script type="text/javascript">
//为svg1父元素下的.nodes circle元素绑定鼠标进入事件
$('#svg1').on('mouseenter', '.nodes circle', function(event) {
//获取被选中元素的名字
var name = $(this).attr("name");
//选择#svg1 .nodes中所有的circle，再增加个class
d3.select('#svg1 .nodes').selectAll('circle').attr('class', function(d) {
//数据的id是否等于name,返回空
if(d.id==name) {
return '';
}
//当前节点返回空，否则其他节点循环判断是否被隐藏起来(CSS设置隐藏)
else {
//links链接的起始节点进行判断,如果其id等于name则显示这类节点
//注意: graph=data
for (var i = 0; i < graph.links.length; i++) {
//如果links的起点等于name，并且终点等于正在处理的则显示
if (graph.links[i]['source'].id == name && graph.links[i]['target'].id == d.id) {
return '';
}
if (graph.links[i]['target'].id == name && graph.links[i]['source'].id == d.id) {
return '';
}
}
return "inactive"; //前面CSS定义 .nodes circle.inactive
}
});
});
script>
显示效果如下图所示：
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第6张图片](http://img.e-com-net.com/image/info8/ec2d4d97c0fc4036a4ac942037074e86.jpg)
四.D3鼠标事件显示相关联的边
通过D3鼠标事件显示相关联的边，循环遍历所有的线，如果线的target或source等于该节点则显示。
//处理相邻的边line是否隐藏 注意 ||
d3.select("#svg1 .links").selectAll('line').attr('class', function(d) {
if (d.source.id == name || d.target.id == name) {
return '';
} else {
return 'inactive';
}
});
此时选中节点的效果如下图所示：
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第7张图片](http://img.e-com-net.com/image/info8/7ebc0165daa4476e8996c27dc9486543.jpg)
此时的完整代码如下所示：
<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="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js">script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">script>
head>
<style type="text/css">
body {
background-color: #272b30;
padding: 30px 40px;
text-align: center;
font-family: OpenSans-Light, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
}
#indicator {
position: absolute;
left: 60px;
bottom: 120px;
text-align: left;
color: #f2f2f2;
font-size: 12px;
}
#indicator>div {
margin-bottom: 4px;
}
#indicator span {
display: inline-block;
width: 30px;
height: 14px;
position: relative;
top: 2px;
margin-right: 8px;
}
.links line {
stroke: rgb(240, 240, 240);
stroke-opactity: 0.2;
}
.links line.inactive {
/*display: none !important;*/
stroke-opacity: 0;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.nodes circle:hover {
cursor: pointer;
}
.nodes circle.inactive {
display: none !important;
}
.texts text {
display: none;
}
.texts text:hover {
cursor: pointer;
}
.texts text.inactive {
display: none !important;
}
#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;
-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;
}
style>
<body>
<h1 style="color:#fff;font-size:32px;margin-bottom:0px;text-align:center;margin-left:40px;">Star Warsh1>
<div style="text-align: center; position:relative;">
<svg width="800" height="560" style="margin-right: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;">节点span>
<span style="border-top-left-radius:0;border-bottom-left-radius:0;position:relative;left:-5px;">文字span>
div>
<div id="search">
div>
<div id="info">
div>
div>
<div style="text-align: center; position:relative;">
<svg width="960" height="240" style="margin-right:60px;margin-bottom:-40px;" id="svg1">
<g>g>
svg>
div>
body>
<script src="https://d3js.org/d3.v4.min.js">script>
<script type="text/javascript">
$(document).ready(function() {
//定义svg变量将布局svg1选出来
var svg = d3.select("#svg1"),
width = svg.attr("width"),
height = svg.attr("height");
//定义name变量制作图标
var names = ['Films', 'Characters', 'Planets', 'Starships', 'Vehicles', 'Species'];
var colors = ['#6ca46c', '#4e88af', '#ca635f', '#d2907c', '#d6744d', '#ded295'];
//背景颜色设置 补充CSS样式设置字体布局
for (var i=0; i < names.length; i++) {
$('#indicator').append("" + names[i] + "");
}
//利用d3.forceSimulation()定义关系图 包括设置边link、排斥电荷charge、关系图中心点
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请求python处理好的节点及边 请求成功返回数据，否则报错
d3.json("starwar_alldata.json", function(error, data) {
if(error) throw error;
graph = data;
console.log(graph);
//D3映射数据至HTML中
//g用于绘制所有边,selectALL选中所有的line,并绑定数据data(graph.links),enter().append("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; //所有线宽度均为1
});
//添加所有的点
//selectAll("circle")选中所有的圆并绑定数据,圆的直径为d.size
//再定义圆的填充色,同样数据驱动样式,圆没有描边,圆的名字为d.id
//call()函数：拖动函数,当拖动开始绑定dragstarted函数，拖动进行和拖动结束也绑定函数
var node = svg.append("g").attr("class", "nodes").selectAll("circle").data(graph.nodes).enter()
.append("circle").attr("r", function(d) {
return d.size;
}).attr("fill", function(d) {
return colors[d.group];
}).attr("stroke", "none").attr("name", function(d) {
return d.id;
}).call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
//显示所有的文本
//设置大小、填充颜色、名字、text()设置文本
//attr("text-anchor", "middle")文本居中
var text = svg.append("g").attr("class", "texts").selectAll("text").data(graph.nodes).enter()
.append("text").attr("font-size", function(d) {
return d.size;
}).attr("fill", function(d) {
return colors[d.group];
}).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)
);
//圆增加title
node.append("title").text(function(d) {
return d.id;
})
//simulation中ticked数据初始化，并生成图形
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
//ticked()函数确定link线的起始点x、y坐标 node确定中心点 文本通过translate平移变化
function ticked() {
link
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
text.
attr('transform', function(d) {
return 'translate(' + d.x + ',' + (d.y + d.size / 2) + ')';
});
}
});
// Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension
// 本地json数据需要放置服务器中请求 XAMPP
//拖动函数代码
var dragging = false;
//开始拖动并更新相应的点
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
dragging = true;
}
//拖动进行中
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
//拖动结束
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
dragging = false;
}
//span点击事件
$('#mode span').click(function(event) {
//span都设置为不激活状态
$('#mode span').removeClass('active');
//点击的span被激活
$(this).addClass('active');
//text隐藏 nodes显示
if ($(this).text() == '节点') {
$('.texts text').hide();
$('.nodes circle').show();
} else {
$('.texts text').show();
$('.nodes circle').hide();
}
});
//为svg1父元素下的.nodes circle元素绑定鼠标进入事件
$('#svg1').on('mouseenter', '.nodes circle', function(event) {
//获取被选中元素的名字
var name = $(this).attr("name");
//选择#svg1 .nodes中所有的circle，再增加个class
d3.select('#svg1 .nodes').selectAll('circle').attr('class', function(d) {
//数据的id是否等于name,返回空
if(d.id==name) {
return '';
}
//当前节点返回空，否则其他节点循环判断是否被隐藏起来(CSS设置隐藏)
else {
//links链接的起始节点进行判断,如果其id等于name则显示这类节点
//注意: graph=data
for (var i = 0; i < graph.links.length; i++) {
//如果links的起点等于name，并且终点等于正在处理的则显示
if (graph.links[i]['source'].id == name && graph.links[i]['target'].id == d.id) {
return '';
}
if (graph.links[i]['target'].id == name && graph.links[i]['source'].id == d.id) {
return '';
}
}
return "inactive"; //前面CSS定义 .nodes circle.inactive
}
});
//处理相邻的边line是否隐藏 注意 ||
d3.select("#svg1 .links").selectAll('line').attr('class', function(d) {
if (d.source.id == name || d.target.id == name) {
return '';
} else {
return 'inactive';
}
});
});
});
script>
html>
五.D3实现鼠标移开图形还原
上面虽然实现了选中节点显示相关联的节点及边，但是不能还原图形，接下来通过鼠标移开事件实现图形还原功能。通过$(’#svg1’).on(‘mouseleave’, ‘.nodes circle’, function(event){})函数实现。
//鼠标移开还原原图，显示所有隐藏的点及边
$('#svg1').on('mouseleave', '.nodes circle', function(event) {
d3.select('#svg1 .nodes').selectAll('circle').attr('class', '');
d3.select('#svg1 .links').selectAll('line').attr('class', '');
});
运行结果如下所示：
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第8张图片](http://img.e-com-net.com/image/info8/b9e34653a3d743cb9f60033bccbf65f0.gif)
此时会发现选中节点拖动鼠标过程中会影响原图，因此需要使用前面定义的dragging变量，保证鼠标在拖动过程中不受其他影响，即使拖动过程中碰到其他节点也不会变换图形。
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第9张图片](http://img.e-com-net.com/image/info8/574ce752c542437db80c9c78d873dc1a.jpg)
该阶段完整的代码如下所示：
<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="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js">script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">script>
head>
<style type="text/css">
body {
background-color: #272b30;
padding: 30px 40px;
text-align: center;
font-family: OpenSans-Light, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
}
#indicator {
position: absolute;
left: 60px;
bottom: 120px;
text-align: left;
color: #f2f2f2;
font-size: 12px;
}
#indicator>div {
margin-bottom: 4px;
}
#indicator span {
display: inline-block;
width: 30px;
height: 14px;
position: relative;
top: 2px;
margin-right: 8px;
}
.links line {
stroke: rgb(240, 240, 240);
stroke-opactity: 0.2;
}
.links line.inactive {
/*display: none !important;*/
stroke-opacity: 0;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.nodes circle:hover {
cursor: pointer;
}
.nodes circle.inactive {
display: none !important;
}
.texts text {
display: none;
}
.texts text:hover {
cursor: pointer;
}
.texts text.inactive {
display: none !important;
}
#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;
-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;
}
style>
<body>
<h1 style="color:#fff;font-size:32px;margin-bottom:0px;text-align:center;margin-left:40px;">Star Warsh1>
<div style="text-align: center; position:relative;">
<svg width="800" height="560" style="margin-right: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;">节点span>
<span style="border-top-left-radius:0;border-bottom-left-radius:0;position:relative;left:-5px;">文字span>
div>
<div id="search">
div>
<div id="info">
div>
div>
<div style="text-align: center; position:relative;">
<svg width="960" height="240" style="margin-right:60px;margin-bottom:-40px;" id="svg1">
<g>g>
svg>
div>
body>
<script src="https://d3js.org/d3.v4.min.js">script>
<script type="text/javascript">
$(document).ready(function() {
//定义svg变量将布局svg1选出来
var svg = d3.select("#svg1"),
width = svg.attr("width"),
height = svg.attr("height");
//定义name变量制作图标
var names = ['Films', 'Characters', 'Planets', 'Starships', 'Vehicles', 'Species'];
var colors = ['#6ca46c', '#4e88af', '#ca635f', '#d2907c', '#d6744d', '#ded295'];
//背景颜色设置 补充CSS样式设置字体布局
for (var i=0; i < names.length; i++) {
$('#indicator').append("" + names[i] + "");
}
//利用d3.forceSimulation()定义关系图 包括设置边link、排斥电荷charge、关系图中心点
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请求python处理好的节点及边 请求成功返回数据，否则报错
d3.json("starwar_alldata.json", function(error, data) {
if(error) throw error;
graph = data;
console.log(graph);
//D3映射数据至HTML中
//g用于绘制所有边,selectALL选中所有的line,并绑定数据data(graph.links),enter().append("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; //所有线宽度均为1
});
//添加所有的点
//selectAll("circle")选中所有的圆并绑定数据,圆的直径为d.size
//再定义圆的填充色,同样数据驱动样式,圆没有描边,圆的名字为d.id
//call()函数：拖动函数,当拖动开始绑定dragstarted函数，拖动进行和拖动结束也绑定函数
var node = svg.append("g").attr("class", "nodes").selectAll("circle").data(graph.nodes).enter()
.append("circle").attr("r", function(d) {
return d.size;
}).attr("fill", function(d) {
return colors[d.group];
}).attr("stroke", "none").attr("name", function(d) {
return d.id;
}).call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
//显示所有的文本
//设置大小、填充颜色、名字、text()设置文本
//attr("text-anchor", "middle")文本居中
var text = svg.append("g").attr("class", "texts").selectAll("text").data(graph.nodes).enter()
.append("text").attr("font-size", function(d) {
return d.size;
}).attr("fill", function(d) {
return colors[d.group];
}).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)
);
//圆增加title
node.append("title").text(function(d) {
return d.id;
})
//simulation中ticked数据初始化，并生成图形
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
//ticked()函数确定link线的起始点x、y坐标 node确定中心点 文本通过translate平移变化
function ticked() {
link
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
text.
attr('transform', function(d) {
return 'translate(' + d.x + ',' + (d.y + d.size / 2) + ')';
});
}
});
// Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension
// 本地json数据需要放置服务器中请求 XAMPP
//拖动函数代码
var dragging = false;
//开始拖动并更新相应的点
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
dragging = true;
}
//拖动进行中
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
//拖动结束
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
dragging = false;
}
//span点击事件
$('#mode span').click(function(event) {
//span都设置为不激活状态
$('#mode span').removeClass('active');
//点击的span被激活
$(this).addClass('active');
//text隐藏 nodes显示
if ($(this).text() == '节点') {
$('.texts text').hide();
$('.nodes circle').show();
} else {
$('.texts text').show();
$('.nodes circle').hide();
}
});
//为svg1父元素下的.nodes circle元素绑定鼠标进入事件
$('#svg1').on('mouseenter', '.nodes circle', function(event) {
//通过变量dragging保证拖动鼠标时，其状态不受影响，从而改变图形
//鼠标没有拖动才能处理事件
if(!dragging) {
//获取被选中元素的名字
var name = $(this).attr("name");
//选择#svg1 .nodes中所有的circle，再增加个class
d3.select('#svg1 .nodes').selectAll('circle').attr('class', function(d) {
//数据的id是否等于name,返回空
if(d.id==name) {
return '';
}
//当前节点返回空，否则其他节点循环判断是否被隐藏起来(CSS设置隐藏)
else {
//links链接的起始节点进行判断,如果其id等于name则显示这类节点
//注意: graph=data
for (var i = 0; i < graph.links.length; i++) {
//如果links的起点等于name，并且终点等于正在处理的则显示
if (graph.links[i]['source'].id == name && graph.links[i]['target'].id == d.id) {
return '';
}
if (graph.links[i]['target'].id == name && graph.links[i]['source'].id == d.id) {
return '';
}
}
return "inactive"; //前面CSS定义 .nodes circle.inactive
}
});
//处理相邻的边line是否隐藏 注意 ||
d3.select("#svg1 .links").selectAll('line').attr('class', function(d) {
if (d.source.id == name || d.target.id == name) {
return '';
} else {
return 'inactive';
}
});
}
});
//鼠标移开还原原图，显示所有隐藏的点及边
$('#svg1').on('mouseleave', '.nodes circle', function(event) {
//如果dragging为false才处理事件
if(!dragging) {
d3.select('#svg1 .nodes').selectAll('circle').attr('class', '');
d3.select('#svg1 .links').selectAll('line').attr('class', '');
}
});
});
script>
html>
六.D3实现文字部分鼠标事件
同样的鼠标移动和移出方法设置文字Text部分，对应的节点为’.texts text’，核心代码如下：
//鼠标进入文本显示相邻节点及边
$('#svg1').on('mouseenter', '.texts text', function(event) {
if (!dragging) {
var name = $(this).attr('name');
$('#info h4').css('color', $(this).attr('fill')).text(name);
$('#info p').remove();
for (var key in info[name]) {
if (typeof(info[name][key]) == 'object') {
continue;
}
if (key == 'url' || key == 'title' || key == 'name' || key == 'edited' || key == 'created' || key == 'homeworld') {
continue;
}
$('#info').append('<p><span>' + key + 'span>' + info[name][key] + 'p>');
}
d3.select('#svg1 .texts').selectAll('text').attr('class', function(d) {
if (d.id == name) {
return '';
}
for (var i = 0; i < graph.links.length; i++) {
if (graph.links[i]['source'].id == name && graph.links[i]['target'].id == d.id) {
return '';
}
if (graph.links[i]['target'].id == name && graph.links[i]['source'].id == d.id) {
return '';
}
}
return 'inactive';
});
d3.select("#svg1 .links").selectAll('line').attr('class', function(d) {
if (d.source.id == name || d.target.id == name) {
return '';
} else {
return 'inactive';
}
});
}
});
//鼠标移除文本还原相应节点及边
$('#svg1').on('mouseleave', '.texts text', function(event) {
if (!dragging) {
d3.select('#svg1 .texts').selectAll('text').attr('class', '');
d3.select('#svg1 .links').selectAll('line').attr('class', '');
}
});
对应的效果如下所示：
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第10张图片](http://img.e-com-net.com/image/info8/40dec3d50c7745e1b23623b748b2a6ce.jpg)
最终完整代码
<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="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js">script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">script>
head>
<style type="text/css">
body {
background-color: #272b30;
padding: 30px 40px;
text-align: center;
font-family: OpenSans-Light, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
}
#indicator {
position: absolute;
left: 60px;
bottom: 120px;
text-align: left;
color: #f2f2f2;
font-size: 12px;
}
#indicator>div {
margin-bottom: 4px;
}
#indicator span {
display: inline-block;
width: 30px;
height: 14px;
position: relative;
top: 2px;
margin-right: 8px;
}
.links line {
stroke: rgb(240, 240, 240);
stroke-opactity: 0.2;
}
.links line.inactive {
/*display: none !important;*/
stroke-opacity: 0;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.nodes circle:hover {
cursor: pointer;
}
.nodes circle.inactive {
display: none !important;
}
.texts text {
display: none;
}
.texts text:hover {
cursor: pointer;
}
.texts text.inactive {
display: none !important;
}
#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;
-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;
}
style>
<body>
<h1 style="color:#fff;font-size:32px;margin-bottom:0px;text-align:center;margin-left:40px;">Star Warsh1>
<div style="text-align: center; position:relative;">
<svg width="800" height="560" style="margin-right: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;">节点span>
<span style="border-top-left-radius:0;border-bottom-left-radius:0;position:relative;left:-5px;">文字span>
div>
<div id="search">
div>
<div id="info">
div>
div>
<div style="text-align: center; position:relative;">
<svg width="960" height="240" style="margin-right:60px;margin-bottom:-40px;" id="svg1">
<g>g>
svg>
div>
body>
<script src="https://d3js.org/d3.v4.min.js">script>
<script type="text/javascript">
$(document).ready(function() {
//定义svg变量将布局svg1选出来
var svg = d3.select("#svg1"),
width = svg.attr("width"),
height = svg.attr("height");
//定义name变量制作图标
var names = ['Films', 'Characters', 'Planets', 'Starships', 'Vehicles', 'Species'];
var colors = ['#6ca46c', '#4e88af', '#ca635f', '#d2907c', '#d6744d', '#ded295'];
//背景颜色设置 补充CSS样式设置字体布局
for (var i=0; i < names.length; i++) {
$('#indicator').append("" + names[i] + "");
}
//利用d3.forceSimulation()定义关系图 包括设置边link、排斥电荷charge、关系图中心点
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请求python处理好的节点及边 请求成功返回数据，否则报错
d3.json("starwar_alldata.json", function(error, data) {
if(error) throw error;
graph = data;
console.log(graph);
//D3映射数据至HTML中
//g用于绘制所有边,selectALL选中所有的line,并绑定数据data(graph.links),enter().append("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; //所有线宽度均为1
});
//添加所有的点
//selectAll("circle")选中所有的圆并绑定数据,圆的直径为d.size
//再定义圆的填充色,同样数据驱动样式,圆没有描边,圆的名字为d.id
//call()函数：拖动函数,当拖动开始绑定dragstarted函数，拖动进行和拖动结束也绑定函数
var node = svg.append("g").attr("class", "nodes").selectAll("circle").data(graph.nodes).enter()
.append("circle").attr("r", function(d) {
return d.size;
}).attr("fill", function(d) {
return colors[d.group];
}).attr("stroke", "none").attr("name", function(d) {
return d.id;
}).call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
//显示所有的文本
//设置大小、填充颜色、名字、text()设置文本
//attr("text-anchor", "middle")文本居中
var text = svg.append("g").attr("class", "texts").selectAll("text").data(graph.nodes).enter()
.append("text").attr("font-size", function(d) {
return d.size;
}).attr("fill", function(d) {
return colors[d.group];
}).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)
);
//圆增加title
node.append("title").text(function(d) {
return d.id;
})
//simulation中ticked数据初始化，并生成图形
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
//ticked()函数确定link线的起始点x、y坐标 node确定中心点 文本通过translate平移变化
function ticked() {
link
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
text.
attr('transform', function(d) {
return 'translate(' + d.x + ',' + (d.y + d.size / 2) + ')';
});
}
});
// Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension
// 本地json数据需要放置服务器中请求 XAMPP
//拖动函数代码
var dragging = false;
//开始拖动并更新相应的点
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
dragging = true;
}
//拖动进行中
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
//拖动结束
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
dragging = false;
}
//span点击事件
$('#mode span').click(function(event) {
//span都设置为不激活状态
$('#mode span').removeClass('active');
//点击的span被激活
$(this).addClass('active');
//text隐藏 nodes显示
if ($(this).text() == '节点') {
$('.texts text').hide();
$('.nodes circle').show();
} else {
$('.texts text').show();
$('.nodes circle').hide();
}
});
//为svg1父元素下的.nodes circle元素绑定鼠标进入事件
$('#svg1').on('mouseenter', '.nodes circle', function(event) {
//通过变量dragging保证拖动鼠标时，其状态不受影响，从而改变图形
//鼠标没有拖动才能处理事件
if(!dragging) {
//获取被选中元素的名字
var name = $(this).attr("name");
//选择#svg1 .nodes中所有的circle，再增加个class
d3.select('#svg1 .nodes').selectAll('circle').attr('class', function(d) {
//数据的id是否等于name,返回空
if(d.id==name) {
return '';
}
//当前节点返回空，否则其他节点循环判断是否被隐藏起来(CSS设置隐藏)
else {
//links链接的起始节点进行判断,如果其id等于name则显示这类节点
//注意: graph=data
for (var i = 0; i < graph.links.length; i++) {
//如果links的起点等于name，并且终点等于正在处理的则显示
if (graph.links[i]['source'].id == name && graph.links[i]['target'].id == d.id) {
return '';
}
if (graph.links[i]['target'].id == name && graph.links[i]['source'].id == d.id) {
return '';
}
}
return "inactive"; //前面CSS定义 .nodes circle.inactive
}
});
//处理相邻的边line是否隐藏 注意 ||
d3.select("#svg1 .links").selectAll('line').attr('class', function(d) {
if (d.source.id == name || d.target.id == name) {
return '';
} else {
return 'inactive';
}
});
}
});
//鼠标移开还原原图，显示所有隐藏的点及边
$('#svg1').on('mouseleave', '.nodes circle', function(event) {
//如果dragging为false才处理事件
if(!dragging) {
d3.select('#svg1 .nodes').selectAll('circle').attr('class', '');
d3.select('#svg1 .links').selectAll('line').attr('class', '');
}
});
//鼠标进入文本显示相邻节点及边
$('#svg1').on('mouseenter', '.texts text', function(event) {
if (!dragging) {
var name = $(this).attr('name');
$('#info h4').css('color', $(this).attr('fill')).text(name);
$('#info p').remove();
for (var key in info[name]) {
if (typeof(info[name][key]) == 'object') {
continue;
}
if (key == 'url' || key == 'title' || key == 'name' || key == 'edited' || key == 'created' || key == 'homeworld') {
continue;
}
$('#info').append('' + key + ''
+ info[name][key] + '');
}
d3.select('#svg1 .texts').selectAll('text').attr('class', function(d) {
if (d.id == name) {
return '';
}
for (var i = 0; i < graph.links.length; i++) {
if (graph.links[i]['source'].id == name && graph.links[i]['target'].id == d.id) {
return '';
}
if (graph.links[i]['target'].id == name && graph.links[i]['source'].id == d.id) {
return '';
}
}
return 'inactive';
});
d3.select("#svg1 .links").selectAll('line').attr('class', function(d) {
if (d.source.id == name || d.target.id == name) {
return '';
} else {
return 'inactive';
}
});
}
});
//鼠标移除文本还原相应节点及边
$('#svg1').on('mouseleave', '.texts text', function(event) {
if (!dragging) {
d3.select('#svg1 .texts').selectAll('text').attr('class', '');
d3.select('#svg1 .links').selectAll('line').attr('class', '');
}
});
});
script>
html>
下载地址：
闲话
这里以作者参观BBD公司的企业文化（非常优秀），简单补充一些知识图谱相关知识：
1.本文仅仅显示了一层相关联的节点，真正的知识图谱可以通过一度关联、二度关联、三度关联进行查询，同时按照农林牧渔、制造业、服务业、建筑业对项目进行聚类划分或社区化知识分解，如下图按照不同行业的结果。
2.BBD的浩格云信，建立企业与自然人的知识图谱，抽取的实体包括企业、企业（有风险事件）、企业（黑名单）、企业（吊销/注销）、自然人，涵盖1.3亿企业主体数据，关系包括投融资关系、股份关系，通过公开的企业工商信息获取。
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第11张图片](http://img.e-com-net.com/image/info8/1b8fca2732d343b9866db88bcf92b0b2.jpg)
3.BBD的动态本体发现（类似于自学习）非常值得借鉴，通过探寻关联企业功能，发现企业之间是否存在关系。
4.浩睿银行平台解决中小型企业融资难、融资贵问题。通过政府、银行、企业、BBD风险共担，企业填写自动生成企业报告，担保公司认可后，出具报告去银行贷款，预估信息额度，省去银行机构的人力成本，并且自动推送企业白名单给有关部门、银行，更好地实施信贷。BBD的阿拉丁分可视化展示企业风险分布图、信用评分、信用评级。
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第12张图片](http://img.e-com-net.com/image/info8/0f1bba530e544640bdbbe999fa91bf43.jpg)
5.它将贵州省大数据分为核心液态、关联业态、衍生业态，通过GIS地图展示，模型识别“挂羊头卖狗肉”企业，通过工商数据、现有模型、关联业态、衍生业态发现挂名的大数据企业。通过大数据让精准扶贫有了“测谎仪”，帮扶关系图谱、脱贫关注图谱，查看驻村干部、扶贫对象关系等，筛选出假的贫困户。
6.建档立卡以前是数据孤岛，现在融合多个部门的数据进行智慧识别。如人社厅数据来看医疗保障，公安数据来检测贫困户是否有车，国土厅数据让住房有保障，教育厅数据让教育有保障，饮水有保障，扶贫办建档立卡等。实现扶贫预警，比如某些已脱贫又患重大疾病，因病返贫，通过医疗数据自动推送，实现自动预警。
![[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边_第13张图片](http://img.e-com-net.com/image/info8/b776bcef410544f2bd7cc6282d828535.jpg)
很幸运，在贵州这片土地上看到了这样一家有活力、有创新，真正做大数据，而不是管理系统加可视化。希望未来更多公司结合机器学习、深度学习、人工智能、知识图谱等技术参与进来，也认识到自己很多的不足，与君共勉，一起加油。
代码下载地址：https://download.csdn.net/download/eastmount/10955369
（By:Eastmount 2019-02-12 下午6点 http://blog.csdn.net/eastmount/）