HTML5 （canvase）拓扑图、关系图及vis.js关系图的使用

黃浩錢 發表於 2019-10-15 14:06:00

HTML5 （canvase）拓扑图、关系图及vis.js关系图的使用

<h2>HTML5 （canvase）拓扑图、关系图：</h2>
http://www.jtopo.com/demo/layout-circle.html
 
<h2>vis.js网址：</h2>
https://visjs.org/
 
vue项目中的使用：
1、npm install vis
 
2、在关系图的页面引入vis
 
　
<div class="cnblogs_code">
<pre>import vis from 'vis'; 或 const vis=require("vis");</pre>
</div>
3、使用：
<div class="cnblogs_code">
<pre> // vis关系图初始化
public init(body: any) {
/**处理关系类型数据 */
let dataArr: any = [];
/**定义links的数组 */
let linksArr: any = [];
/**处理返回的其他数据 */
// 节点数
body.forEach((item: any, index: number) => {
 // if (index < 20) {
 let obj: any = {
 id: "",
 shape: "dot",
 color: "",
 label: ""
 };
 let objB: any = {
 id: "",
 shape: "dot",
 color: "",
 label: ""
 };
 obj.id = item.asfzh;
 obj.label = item.asfzh;
 obj.color = item.sfzZdrFlag1 === 1 ? "#f7220b" : "#2aa2f7";
 dataArr.push(obj);
 objB.id = item.bsfzh;
 objB.label = item.bsfzh;
 objB.color = item.sfzZdrFlag2 === 1 ? "#f7220b" : "#2aa2f7";
 dataArr.push(objB);
});

//关系
body.forEach((item: any, index: number) => {
 // if (index < 20) {
 let linksObj: any = {
 from: "",
 to: "",
 label: "",
 font: {align: "top",color:"from"},
 arrows: "to"
 };
 linksObj.from = item.asfzh;
 linksObj.to = item.bsfzh;
 linksObj.label = `${item.cnt}`; //必须是字符串不能是数字
 linksArr.push(linksObj);
});
let strArr = [];
let objArr = [];
for (let i = 0; i < dataArr.length; i++) {
 if (strArr.indexOf(dataArr.id) == -1) {
 strArr.push(dataArr.id);
 objArr.push(dataArr);
 }
}

const container = document.getElementById("network_id");
let nodes = objArr;
let edges = linksArr;
const data = {
 nodes: nodes,
 edges: edges
};
//自定义
const options = {
 autoResize: true,
 // physics:false,
 nodes: {
 shape: "dot",
 size: 12,
 font: {
 size: 12,
 color:'#8e8e8e'
 },
 },
 edges: {
 width: 1,
 smooth: {
 //设置两个节点之前的连线的状态
 enabled: true //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
 },
 font:{
 color:'#8e8e8e',
 strokeWidth: 0
 }
 },
 interaction: {
 dragNodes: true, //是否能拖动节点
 dragView: true, //是否能拖动画布
 hover: true, //鼠标移过后加粗该节点和连接线
 multiselect: true, //按 ctrl 多选
 selectable: true, //是否可以点击选择
 selectConnectedEdges: true, //选择节点后是否显示连接线
 hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
 zoomView: true //是否能缩放画布
 },
};
let network = new Vis.Network(container, data, options);
}</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
sunshine15666 
来源：https://www.cnblogs.com/xiaolucky/p/11677356.html

頁: [1]

琼殿技术论坛's Archiver

HTML5 （canvase）拓扑图、关系图及vis.js关系图的使用