做二手手机交易网站,专业3合1网站建设电话,山东住房城乡建设厅官方网站,取名字大全免费查询文章目录 #x1f4da;优化内容#x1f4da;html和css优化#x1f407;搜索框部分#x1f407;刷新按钮部分 #x1f4da;js#x1f407;搜索框部分#x1f407;刷新部分 前期回顾#xff1a;【d3】力导图优化#xff0c;本文主要是基于上篇代码#xff0c;以代码段添… 文章目录 优化内容html和css优化搜索框部分刷新按钮部分 js搜索框部分刷新部分 前期回顾【d3】力导图优化本文主要是基于上篇代码以代码段添加的方式实现优化。 优化内容
添加搜索框功能实现搜索高亮。 双击空白处图表还原的同时搜索框清零。添加刷新按钮页面刷新。
html和css优化
搜索框部分
搜索框部分的样式直接套的模板修改了对应的颜色和div在页面的位置忘记存参考博客了后续找回来了再放(人)html部分div classsearch-boxinput typetext idsearchBox classsearch-txt placeholdername? /a classsearch-btni classfa fa-search aria-hiddentrue/i/a
/divcss部分.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 hrefhttps://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css relstylesheet最终效果 静置 鼠标悬浮 输入
刷新按钮部分
html部分下载了一个刷新icon套了个div。div classbuttonimg ideditBtn src./assects/images/刷新.png
/divcss部分用div确定位置借助:hover时的scale设置实现选定时放大。.button{position: absolute;left: 90%;top: 5%;
}
#editBtn{height: 30px;width: 30px;
}#editBtn:hover{scale:1.2;
}js
搜索框部分
在创建部分添加搜索框搜索功能关注每次搜索前先还原不然历史搜索高亮结果会有干扰。 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();});
});
