0.实验目的
最近看了很多项目的前端，都带有数据可视化，因此想要实际体验一下自己写一个
很久没记录学习，也是因为一直在看这个，大概2周多，完整项目太大了，就暂时先记录一个功能
前后端还是区别比较大？感觉写起调用来很乱
由于没有什么前端编写的经验，实在是比较坎坷
先看了一下YouTube的视频课，直接看的JS部分
（https://www.youtube.com/playlist?list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc）
B站熟肉
（https://www.bilibili.com/video/BV17b41137yx?p=38&t=852）
这个课讲得比较容易入门，虽然不是很细，也没找到源码。。
找了大量资料看看有没有现成的支持，主要就是JTopo
jTopo是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。
jTopo的文档不是很细致，基本靠官网的demo和GitHub上的项目来熟悉
1.环境准备
VSCode（Live Server插件）
JTopo-0.4.8
Layui
直接写到功能较多还很困难，于是就先解决搜索Node的功能
layui文档稍微细致一些，用起来体验也比较好
刚入门结构和顺序还比较乱，但是起码实现了功能
2.源码显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layui_test</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item layui-icon layui-icon-search" style="font-size: 30px; color: #1E9FFF;"> </li>
<li class="layui-nav-item"><input class="layui-input" id="queryText" style="display: inline-block;width: 150px;height: 25px;" placeholder="输入关键词查找节点" > </li>
<li class="layui-nav-item"><button type="button" class="layui-btn" onclick="queryContext()">查询</button></li>
</ul>
<canvas id="canvas" width="500" height="500"></canvas>
<script src="./layui/layui.all.js"></script>
<script src="../static/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="../static/jtopo/js/jtopo-0.4.8-dev.js" type="text/javascript"></script>
<!-- <script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script> -->
<script type="text/javascript">
$(document).ready(function() {
//画布对象：canvas
var canvas = document.getElementById('canvas');
//canvas.height = $(window).height() - $('.layui-header').height();
//抽象的舞台对象对应一个Canvas对象，所有图形展示的地方
var stage = new JTopo.Stage(canvas);
//场景对象
var scene = new JTopo.Scene(stage);
//背景颜色设置
//scene.background='./img/bg.jpg';
var container = new JTopo.Container();
//流式布局（水平、垂直间隔均为10)
var flowLayout = JTopo.Layout.FlowLayout(20, 35);
//容器布局样式----流式布局
container.layout = flowLayout;
container.width=400;
container.height=130;
//容器范围设置
container.setBound(10, 10, 300,120);
for(var i=0; i<12; i++){
var node = new JTopo.Node("Port" + i);
scene.add(node);
container.add(node);
}
scene.add(container);
//scene.add(container);
// //节点添加
// var node = new JTopo.Node("EMC");
// //设置节点位置
// node.setLocation(150, 100);
// //text
// node.text = 'test';
// node.textPosition = 'Middle_Center';
// //节点填充颜色
// node.fillcolor='#CD0000';
// //场景对象添加节点
// scene.add(node);
});
</script>
<script>
function queryContext(){
var text = $("#queryText").val().trim();
alert(text);
var nodes = JTopo.Node;
var scene = JTopo.stage.childs[0];
console.log((scene));
//获得所有node
var nodes = scene.childs.filter(function(e){
return e instanceof JTopo.Node;
});
//取消其他被选中的状态
for(var j=0;j<nodes.length;j++){
nodes[j].selected = false;
};
//查找搜索内容
nodes = nodes.filter(function(e){
if(e.text == null) return false;
return e.text.indexOf(text) != -1;
});
console.log(nodes);
//显示选中的内容
if(nodes.length > 0){
var node = nodes[0];
node.selected = true;
//将选中内容放在stage正中间
//var location = node.getCenterLocation();
//console.log(location);
//JTopo.stage.setCenter(location.x,location.y);
};
};
</script>
<script>
$("#queryText").keydown(function(e){
if(e.keyCode == 13){
queryContext();
}
});
</script>
</body>
</html>
3.效果如图
输入4进行搜索，能够看到Port4该Node显示被选中
查询按钮和文本输入框回车都能够执行查询的操作
