Comments (5)
I have tried to create a Vue-3 container for vis-network. I got issues related to strict mode. Some how all vis functions ended up with problems in their argument TS. Here is a snapshot.
from vue2vis.
Here is a codesandbox link which reproduces this issue with graph2d. Note that vue version in the sandbox is 3.2.6.
Please take a look @alexcode
from vue2vis.
example for vue 3:
<template>
<q-inner-loading :showing="loading">
<q-spinner-ball size="50px" color="primary"/>
</q-inner-loading>
<div ref="root"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Network } from 'vis-network';
import API from 'src/services/api';
export default defineComponent({
name: 'vis',
data(): {
vis: Network | null,
loading: boolean
} {
return {
loading: false,
vis: null,
};
},
async mounted() {
try {
this.loading = true;
var data: any = await API.core.vis(this.$route.query);
} catch (error) {
const message = 'Error vis';
this.$q.notify({ type: 'negative', message: message });
console.log(message, error, data);
} finally {
this.loading = false;
}
if (data != undefined) {
const el : HTMLElement | any = this.$refs.root;
this.vis = new Network(el, data['graph'], {});
this.vis.once('afterDrawing', () => {
el.style.height = '100vh'
});
};
},
beforeUnmount() {
this.vis?.destroy();
}
});
</script>
from vue2vis.
minimum for typescript and vue 3:
<template>
<div ref="root"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Network } from 'vis-network';
export default defineComponent({
name: 'vis',
data(): {
vis: Network | null,
} {
return {
vis: null,
};
},
mounted() {
const el : HTMLElement | any = this.$refs.root;
this.vis = new Network(el, {nodes: ...}, {});
this.vis.once('afterDrawing', () => {
el.style.height = '100vh'
});
};
},
beforeUnmount() {
this.vis?.destroy();
}
});
</script>
from vue2vis.
Sorry for the very late reply. @shambu2k you are using the vue2 version of vue2vis. You must migrate to the new package of the repo by modifying the imports to:
import { Graph2d } from "@vue2vis/graph2d";
import "vis-timeline/styles/vis-timeline-graph2d.css";
from vue2vis.
Related Issues (20)
- Dependency not found HOT 2
- Marker Support HOT 1
- items are added but not visible on timeline HOT 5
- Wind feature is missing from physics option HOT 2
- Custom template for network
- Graph2d zoom and slide not working very well HOT 2
- 修改options中的layout报错
- Timeline: cluster options is not working HOT 2
- [Timeline] Limitations of using Vue component as items or groups HOT 2
- [Network] Vis Event Names
- [Timeline] Nested groups with 3 tree levels do not collapse correctly HOT 3
- dragEnd,dragStart event is invalid HOT 1
- 怎么才能像官方demo那样初始时不抖动?physics 实际时开启的
- Using without groups parameter in Latest Version HOT 1
- How to install Vue2vis on a macbook pro.
- How to load french locale ?
- Unmet dependencies with `@vue2vis/network` HOT 2
- The timeline chart don't show the tooltip
- Is it possible to group by lvl in a radial way?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue2vis.