cytoscape.js在vue项目中的安装及案例
1. 安装:
npm i cytoscape --save
2. 引入:main.js
import cytoscape from 'cytoscape';
Vue.prototype.$cytoscape = cytoscape;
3. demo代码:
<template>
<div id="MainCy" style="width: 100%;height: 100%;"></div>
</template>
<script>
export default {
mounted() {
var cy = this.$cytoscape({
container: document.getElementById('MainCy'), layout: {
name: 'grid',
rows: 2,
cols: 2
}, style: [{
selector: 'node',
style: {
'content': 'data(name)',
'background-color': 'magenta',
'background-image': 'url(img/shixian.png)',
}
}, {
selector: 'edge',
style: {
'content': 'data(relationship)',
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'color': 'red',
}
}, // some style for the extension {
selector: '.eh-handle',
style: {
'background-color': 'red',
'width': 12,
'height': 12,
'shape': 'ellipse',
'overlay-opacity': 0,
'border-width': 12, // makes the handle easier to hit
'border-opacity': 0
}
}, {
selector: '.eh-hover',
style: {
'background-color': 'red'
}
}, {
selector: '.eh-source',
style: {
'border-width': 2,
'border-color': 'red'
}
}, {
selector: '.eh-target',
style: {
'border-width': 2,
'border-color': 'red'
}
}, {
selector: '.eh-preview, .eh-ghost-edge',
style: {
'background-color': 'red',
'line-color': 'red',
'target-arrow-color': 'red',
'source-arrow-color': 'red'
}
}, {
selector: '.eh-ghost-edge.eh-preview-active',
style: {
'opacity': 0
}
}
], elements: {
nodes: [{
data: {
id: 'j',
name: 'Jerry'
}
},
{
data: {
id: 'e',
name: 'Elaine'
}
},
{
data: {
id: 'k',
name: 'Kramer'
}
},
{
data: {
id: 'g',
name: 'George'
}
}
],
edges: [{
data: {
source: 'j',
target: 'e'
}
},
{
data: {
source: 'j',
target: 'k'
}
},
{
data: {
source: 'j',
target: 'g'
}
},
{
data: {
source: 'e',
target: 'j'
}
},
{
data: {
source: 'e',
target: 'k',
relationship: '1'
}
},
{
data: {
source: 'k',
target: 'j',
relationship: '2'
}
},
{
data: {
source: 'k',
target: 'e',
relationship: '3'
}
},
{
data: {
source: 'k',
target: 'g',
relationship: '4'
}
},
{
data: {
source: 'g',
target: 'j',
relationship: '5'
}
}
]
}
});
cy.nodes().on('click', (evt) => {
console.log(evt)
});
cy.edges().on('click', (evt) => {
console.log(evt)
}); },
}
</script>
demo效果:
cytoscape.js在vue项目中的安装及案例的更多相关文章
- d3.js在vue项目中的安装及案例
1. 安装: npm i d3 --save 2. 引入:main.js import * as d3 from "d3"; Vue.prototype.$d3 = d3; win ...
- vue项目中npm安装sass,less,stylus
用vue-cli脚手架搭建出来的,默认是用标准css的.如果你想用sass,less,stylus就需要自己手动安装一下了. 进入项目文件夹,然后安装(这里以stylus为例)stylus和stylu ...
- 【bcrypt】vue项目中bcrypt安装报错
[报错] 报错时安装方法: npm install bcrypt [解决方法] npm install bcryptjs 用 bcryptjs 替换 bcrypt 即可.
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- 在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'
canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...
- vue 项目中安装npm--save-dev 和 --save 命令
在vue项目中我们常用npm install 安装模块或插件 有两种命令把他们写入到 package.json 文件里面去 例如安装axios 安装到开发环境npm axios --save-dev ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
随机推荐
- 2019.01.16 bzoj3526: [Poi2014]Card(线段树)
传送门 线段树菜题. 题意:有一些卡牌,正反各有一个数,你可以任意翻转,每次操作会将两张卡牌的位置调换,你需要在每次操作后回答以现在的卡牌顺序能否通过反转形成一个单调不降的序列. 思路: 对于一个线段 ...
- VIM 与 系统剪切版
1, 查看 vim 是否支持 clipboard 功能 $ vim --version | grep clipboard 2, 如果有 +clipboard 则跳过这一步; 如果显示的是 -clipb ...
- mac环境下配置nginx
1.建议使用homebrew安装(ruby安装 brew install ruby) ruby -e "$(curl -fsSL https://raw.githubusercont ...
- VSS + Eclipse 管理源码
- 【JS库】URI.js
做前端的,应该有不少人都写过操作URL的代码,比如提取问号后面的参数.或者主机名什么的,比如这样: var url="http://jszai.com/foo?bar=baz", ...
- 20169207《Linux内核原理及分析》第十二周作业
本周选做的信息安全实验为Python实现Zip文件的暴力破解 实验预备: 这次实验我们需要用到的库为zipfile.下来我们先来了解一下这个模块. 首先我们的重点是对zip文件的操作,而zipfile ...
- Android 百度云推送
http://developer.baidu.com/wiki/index.php?title=docs/cplat/push/sdk/clientsdk. public class DemoAppl ...
- 第32讲:List的基本操作实战与基于模式匹配的List排序算法实现
今天来学习一下list的基本操作及基于模式匹配的排序操作 让我们从代码出发 val bigData = List("hadoop","spark") val d ...
- Javaweb异常提示信息统一处理
Java异常封装(自己定义错误码和描述,附源码) 2016年01月29日 22:30:54 小宝鸽 阅读数:23262 标签: java异常 更多 个人分类: Java基础 所属专栏: Java工作实 ...
- 压力测试 mac ab
apache ab:http://blog.chinaunix.net/uid-20382003-id-3032167.html 简单用法: ab -n 3000 -c 3000 http://www ...