前期回顾:【d3】力导图优化,本文主要是基于上篇代码,以代码段添加的方式实现优化。
<div class="search-box">
<input type="text" id="searchBox" class="search-txt" placeholder="name?" />
<a class="search-btn">
<i class="fa fa-search" aria-hidden="true">i>
a>
div>
.search-box{
position: absolute;
left: 20%;
top: 10%;
transform: translate(-50%,-50%);
background-color: #a04c3b;
height: 30px;
margin-top: 20px;
padding: 10px;
border-radius: 40px;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: #fff;
font: 16px sans-serif;
line-height: 30px;
width: 0;
/* 动画过渡 */
transition: 0.4s;
}
.search-txt::placeholder{
color: #ffffff67;
}
.search-btn{
color: #fff;
float: right;
width: 3cap;
height: 30px;
border-radius: 50%;
background-color: #a04c3b;
/* 弹性布局 水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
/* 动画过渡 */
transition: 0.4s;
}
.search-box:hover .search-txt{
width: 200px;
padding: 0 6px;
}
.search-box:hover .search-btn{
background-color: #a04c3b;
}
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="button">
<img id="editBtn" src="./assects/images/刷新.png">
div>
:hover
时的scale
设置,实现选定时放大。.button{
position: absolute;
left: 90%;
top: 5%;
}
#editBtn{
height: 30px;
width: 30px;
}
#editBtn:hover{
scale:1.2;
}
var searchBox = document.getElementById('searchBox');
searchBox.addEventListener('input', function() {
var searchName = this.value.trim();
if (searchName !== '') {
// 每次搜索之前先还原
dependsNode = dependsLinkAndText = [];
_this.highlightObject(null);
// 节点姓名匹配
var matchedNode = defaultConfig.data.nodes.find(function(node) {
return node.name.toLowerCase() === searchName.toLowerCase();
});
_this.highlightObject(matchedNode);
} else {
_this.highlightObject(null);
}
});
// 在整个页面上绑定双击事件处理函数
d3.select(".network").on('dblclick',function(){
// 当双击页面其他区域时,取消所有节点、连接线和连线上的文本的高亮显示,并重置依赖节点和连接线数组
dependsNode = dependsLinkAndText = [];
_this.highlightObject(null);
// 同时清空输入框
d3.selectAll("#searchBox").property("value", "");
});
click
事件绑定location.reload();
,实现页面刷新。d3.json("./data/people.json", function(json) {
// 创建部分
function GroupExplorer(wrapper,config){...}
// 实例应用
new GroupExplorer('.network',{
data:json
});
document.getElementById('editBtn').addEventListener('click', function() {
location.reload();
});
});