dash14 / v-network-graph Goto Github PK
View Code? Open in Web Editor NEWAn interactive network graph visualization component for Vue 3
Home Page: https://dash14.github.io/v-network-graph/
License: MIT License
An interactive network graph visualization component for Vue 3
Home Page: https://dash14.github.io/v-network-graph/
License: MIT License
Binding computed values to :nodes
and :edges
should result in the graph updating when the value of the computed changes.
The graph does not update, although the value of the computed has changed.
whatsits
.<script setup lang="ts">
import { reactive, computed } from "vue"
const whatsits = reactive([{id: "blah", name: "hi there"}])
const edges = reactive({});
const addNode = function () {
whatsits.push({id: "secondNode", name: "this works?"});
}
const nodes = computed(() => Object.fromEntries(whatsits.map(e => [e.id, { name: e.name }])));
</script>
<template>
<button type="button" @click="addNode">Add node</button>
<ul>
<li v-for="n in whatsits" :key="n.id">{{ n.name }} is {{ nodes[n.id] ? "in" : "not in" }} "nodes"</li>
</ul>
<v-network-graph :nodes="nodes" :edges="edges" />
</template>
(Sorry for originally submitting this as an empty issue - my finger slipped.)
I noticed that the node:pointerup
event will only fire if you pressed the mouse button on that same node. Meaning, if you have nodes A and B, and press down mouse button on node A, and then move to node B and release mouse button over node B, you will get node:pointerdown
on node A but no node:pointerup
at all.
The node:pointerover
will also not fire when hovering a node (B) while holding the mouse button if it was pressed over another node (A).
Is this intended? Would it be possible to have these events fired in all cases?
I am trying to implement a way to create an edge between 2 nodes using the mouse (dragging from a node to an other) but this is preventing me from finding out what the destination node is (when releasing the mouse button).
Thanks
----EDIT----
I found the CSS file in the vue node-modules.... The css was located in the lib folder.... I fixed this by altering the import statement to direct to the lib folder....
import "v-network-graph/**lib**/style.css"
---ORIGINAL----
the npm install command doesn't pull the style.css file. Likewise, I'm getting an error when trying to pull or even find the style.css file. Where can I find the correct style.css file, should be included in the Repo?
I ran the following npm command successfully.
npm i v-network-graph
I have added the following import and use statements
import VNetworkGraph from "v-network-graph"
import "v-network-graph/style.css"
Vue.use(VNetworkGraph)
After running my vue app, I get the following error:
This dependency was not found:
* v-network-graph/style.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save v-network-graph/style.css
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
I run the suggested command....
npm install --save v-network-graph/style.css
And get the following error
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://[email protected]/v-network-graph/style.css.git
npm ERR!
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Seth Klingbeil\AppData\Roaming\npm-cache\_logs\2021-09-01T19_38_00_919Z-debug.log
Hi,
First, I appreciate your library much, and i would like to thank you for your effort. I sadly encountered that the import of the style.css file is failing. It seems to be that the styles.css file (import "v-network-graph/style.css) is missing in the node_modules directory. Do you have any workaround for that?
Thanks in advance,
Have a nice day.
Phil
Hi @dash14,
is there any way to sponsor your work for this amazing library?
Something like github sponsor, buy me a coffee, etc.
Best regards
This might be beyond the aims of v-network-graph, but I am attempting to use v-network-graph to create a graph editor for Neo4j. It would allow a user to create/edit graphs in the browser, and these would be saved in Neo4j on the backend. Likewise, a graph stored in Neo4j could be converted to v-network-graph on the frontend for viewing and additional editing.
This project suggests some potential new features for v-network-graph. One would be the ability to select multiple nodes by dragging a rectangle or lasso around existing nodes. Once selected, the nodes could be removed from the graph, if that is the intent. Or, more interesting, the selected nodes could be included into a group by writing a node property on each.
In the latter case, there could be an option to keep the rectangle or other boundary visible, to denote the group. It could even have an optional visible text label somewhere in the boundary, (e.g., "Group 1"). Finally, the nodes within the boundary could be arranged by some force method, and the group could be treated as a whole when using a force method to arrange all other nodes. I imagine all this would involve creating a subgroup within the SVG that includes the rectangle as a border.
Is the ability to select multiple nodes in this way of interest to the developers? If you do not foresee adding this as a feature, could you provide a short description as to how this might be best accomplished in the existing v-network-graph framework?
Hi,
I want to incorporate this library into my regular vuejs application, the main components and vue files are not in Typescript. How to do I embed this into it? Since this library requires typescript?
thanks in advance.
Hi, really appreciate your amazing work!
I'm using Vue3 with Typescript and I can't reproduce this example about d3-force.
anyway, VSCode didn't show any error after importing v-network-graph/force-layout
(the interface is reachable I guess), but the compilation failed when I run npm run serve
.
here's the full error message:
ERROR Failed to compile with 1 error
This dependency was not found:
* v-network-graph/force-layout in ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--15-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/DiagramContainer.vue?vue&type=script&lang=ts
To install it, you can run: npm install --save v-network-graph/force-layout
thanks for reviewing this problem!
Hello, i noticed that coordinates translation example, that worked in rev previous to 0.5.3, now is not working.
Is there a way to visualize self-loops? Currently an edge, where source and target are the same, only goes out of the node but the end doesn't go back into the node, but rather ends somewhere besides the node without connecting to anything.
Hi,
First, thanks a lot for this awesome library.
I tried to create a custom node with icons as stated in the documentation: https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node. Unfortunately, when trying to download the SVG as described in the docs (https://dash14.github.io/v-network-graph/examples/misc.html#get-the-content-as-svg-data), it seems that the icons are not visible in the downloaded SVG and the font is different.
Is there a way to somehow embed the styles into the downloaded SVG?
Thanks and best regards.
Hello, here some issues I have found while testing rev 0.5.3
view:dblclick is working OK on mobile and desktop
Thank you and Best Regards!
Hi @dash14,
is it possible to have an inbuilt hyphenation? So that if a word or text is too long, it breaks into the next line?
Like the CSS attribute word-break: break-all | break-word
.
Hi, do you plan to support Nuxt 3?
https://dash14.github.io/v-network-graph/getting-started.html
it says what needs to be added to main.js here it is
But this construction using in Vue 2
In Vue 3 need using this construction
import { createApp } from 'vue'
import App from './App.vue'
import VNetworkGraph from "v-network-graph"
import "v-network-graph/lib/style.css"
createApp(App).use(VNetworkGraph).mount('#app')
it's my first time using Vue 3 and I didn't immediately understand why nothing works for me and what to do with it))
please fix this error and it would be great to sign the names of the files in which you want to make these imports (main.js) I think junior developers will appreciate it)
P.s. if an entry in main.js was used as in vue 2, does this mean that v-network-graph will work in vue 2 as well?
Hi .
is exist a version of project for Vue 2.x version?
On the examples event page the anchor tag on
"For a list of events that can be captured, see here."
is missing the prefix /v-network-graph
at the beginning of the URL, resulting in a 404.
I was going to create a pull request for this, but I can't work out if the docs are generated or written by hand (I've never used github pages, it isn't as obvious as I expected).
Hi, I got a error message while trying the example about custom nodes:
Expected '<component>' elements to have 'v-bind:is' attribute
then I fixed it by changing line 13
<component is="style">
into
<component :is="'style'">
don't know if this is a bug or just my environment issue? thanks!
Hi,
Do you have an example of how to configure the boot file when using Quasar?
Normally, I would put this in the main.js file and everything works:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VNetworkGraph from "v-network-graph";
import "v-network-graph/lib/style.css";
createApp(App).use(store).use(router).use(VNetworkGraph).mount("#app");
But you cannot do this in Quasar, you have to create seperate boot files for each one...I tried this but got an error saying failed to resolve component
import { boot } from 'quasar/wrappers'
import VNetworkGraph from "v-network-graph";
import "v-network-graph/lib/style.css";
// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(({ app }) => {
// something to do
app.config.globalProperties.$VNetworkGraph = VNetworkGraph
})
thanks!
I don't know if it is possible to fix a node to the center of the visualization in a force layout.
If so, it would be nice to add it to the documentation.
If not, see it as a feature request ;)
It would be super helpful, if someone could add this functionality to this amazing visualization package.
It seems like a solid ground to implement mindmap functionality with advanced features eventually. Is that on the roadmap somehow?
Hi,
Very nice library!
I just wonder if it is possible to have arrows on the edges to indicate the flow?
kr,
Filip.
hi, I am wondering if there is any way I can set the z-index for specific nodes and edges?
(ex. I want the node to be 'z-index=999' when I trigger the hover
event)
thx!
Is it possible to have a different force configuration for different nodes/edges?
hii use image as node and then when i want to use storke for the same node it will be hide behind the image
how can i fix this issue
This might be related to View:unload #24 . As suggested there, I am using version 0.3.10.
I have two "views/pages" or more accurately two components, one of which will show depending on a button click. One of the views, call it the "graph view", has a child component containing a v-network-graph. Once I create a graph, I save the graph data on the backend. When the graph view is opened, code in "mounted()" queries the backend to obtain the saved graph data, if any, and uses it to populate the svg.
I can create a svg graph and save the results. And I can refresh the app from the "other" page and open the graph view without error. But when have the graph view open, then click the button to jump to the other view and back again to the graph view, I always obtain the error:
svg-pan-zoom.js:669 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getViewBox')
at SvgPanZoom.fit (svg-pan-zoom.js:669)
at Proxy.fit (svg-pan-zoom.js:1003)
at Proxy.fitToContents (svg-pan-zoom-ex.ts:52)
at network-graph.vue:389
The same error occurs if I have the graph view open, alter the code to that page, and save the changes. This causes the v-network-graph component to refresh.
The code near network-graph.vue line 389 is:
// Scales the content to fit in the SVG area.
const fitToContents = () => {
updateBorderBox(() => {
svgPanZoom.value?.fitToContents()
It appears that svgPanZoom is being called with no ViewBox present, so it can't complete the fit function and raises an error. The error apparently occurs before my code in mounted() can query the backend to retrieve the saved graph data. That is, the error occurs, then the backend is queried, then the data is returned and my code works fine.
I can simply ignore the error. But perhaps it would be best if the code in network-graph.vue was changed to call svgPanZoom only if there is a ViewBox present (if that is possible). I'm hoping that this verbal description makes sense, so I won't need to create a small demo to show the problem.
John
Hi @dash14,
I'm working with the summarized edges feature at the moment. I got two questions for you :)
edge:pointerover
but it did not work. Is it possible to have a hover event on summarized edges?NodeLabelDirection
?Thanks for your amazing stuff 🥇
Hi, this project looks super useful for what I need to do. Unfortunately, I've tried adding it to my project and to brand new Vue projects and it always hangs on the npm install v-network-graph
. Is this an issue with the npm registry? With my end? If so, do you know how to fix this?
Here's the output of install verbose:
$ npm install v-network-graph --verbose
npm info it worked if it ends with ok
npm verb cli [ '/usr/bin/node',
npm verb cli '/usr/bin/npm',
npm verb cli 'install',
npm verb cli 'v-network-graph',
npm verb cli '--verbose' ]
npm info using [email protected]
npm info using [email protected]
npm verb npm-session 394b41768a22dfca
npm timing stage:loadCurrentTree Completed in 1606ms
npm timing stage:loadIdealTree:cloneCurrentTree Completed in 20ms
npm timing stage:loadIdealTree:loadShrinkwrap Completed in 584ms
npm http fetch GET 304 https://registry.npmjs.org/mitt 391ms (from cache)
[..................] / fetchMetadata: http fetch GET 304 https://registry.npmjs.org/mitt 391ms (from cache)
how can i show node info via tootip on hover on node
Hi,
Can you enhance this example:
https://dash14.github.io/v-network-graph/examples/appearance.html#change-the-appearance-of-each-node-and-edge
by adding "Add" and "Remove" nodes like in this example:
https://dash14.github.io/v-network-graph/examples/operation.html#add-remove-network-elements
thanks!
When using Safari browser on iPhone or Mac computer, if a text label is multiple lines (i.e., contains \n
) then the entire label is shifted upwards when rendered on the graph (assuming label direction = south).
v-network-graph/src/components/label-text.vue
Lines 156 to 161 in 4e91d30
When a <tspan>
is rendered in Safari, it does not seem to inherit the dominant-baseline
attribute from the parent <text>
element. Chrome, Firefox, and Edge do not seem to have this issue.
Consider setting dominant-baseline
directly on <tspan>
in addition to <text>
.
Reference: https://stackoverflow.com/a/42023579
"Apparently, Safari wants the inner tspan have the dominant baseline set..."
Hello everybody, I have an issue relative to use "EventHandlers" in my project.
Importing VNetworkGraph from 'v-network-graph' , the import don't have this function mencioned at doc "vNG.EventHandlers".
The VNetworkGraph have only these exports at dependency (version 0.5.8), and I can't access the "EventHandlers":
import { Plugin } from "vue";
import * as components from "./components/index";
declare const install: Exclude<Plugin["install"], undefined>;
export default install;
export declare type VNetworkGraphInstance = InstanceType<typeof components.VNetworkGraph>;
export declare type Instance = InstanceType<typeof components.VNetworkGraph>;
export * from "./components/index";
export { getFullConfigs } from "./common/config-defaults";
export { SimpleLayout } from "./layouts/simple";
export { GridLayout } from "./layouts/grid";
export type { LayoutHandler } from "./layouts/handler";
export * from "./common/types";
export * from "./common/configs";
export { useStates } from "./composables/state";
I'm using VUE 3 with JS (not TS) and I trying do this in mounted() cycle:
this.eventHandlers = VNetworkGraph.EventHandlers = {
'node:click': ({ node }) => {
console.log('inside');
// toggle
this.nodes[node].active = !this.nodes[node].active;
}
};
Hi, love the examples in the documentation!
I wonder whether the nodes and edges data have to be set up in a vue file as shown in the documentation, or it's possible to compose the graph by reading a JSON file?
E.g. import data from "./test-data.json"
If so, can you kindly throw me a brief snippet of how to get the imported file integrated in App.vue when doing const nodes: Nodes = {}
? I'm very new to Vue and this library, so thank you in advance!
I have following config
view: {
panEnabled: true,
zoomEnabled: true,
scalingObjects: true,
fit: true,
layoutHandler: new GridLayout({ grid: 20 }),
grid: {
visible: true,
},
},
And <g class="v-background-viewport"...
scaling along with other objects with grid on background
When i turn scalingObjects option to false everything back to normal, but my task is scale nodes and edges on zoom and leave background grid fullscreen.
Hi @dash14,
I don't know if I configure something wrongly, but I can't set the minimum zoom level. That's my config regarding zoom:
zoomEnabled: true, // whether the zoom is enabled or not. default: true
minZoomLevel: 0.5, // minimum zoom level. default: 0.1
maxZoomLevel: 2, // maximum zoom level. default: 64
You can also see in one of your examples (https://dash14.github.io/v-network-graph/examples/layout.html#scale-the-entire-objects) that you can scroll out indefinitely. Is that desired?
Sorry for beeing this much annoying 😅
Best regards
Hello!
Using the capture all events example I can see the view:click and view:dblclick events work. Then if I do a right click/long press on the view I can see view:contextmenu event work. But after that both view:click and view:dblclick are not fired anymore.
Thank you and Best Regards
I am trying to focus on a specific node when the graph gets loaded. However it seems that there is always a call to panToCenter
after view:loaded
event is fired.
This behavior can be observed on the examples page - https://dash14.github.io/v-network-graph/examples/event.html#capture-all-events:
This behavior forces users to pan in setTimeout
(so there is a workaround).
Hello, I am using your library on a tablet oriented project, so I rely on touch gestures.
I would like to use a context menu, but on mobile i cannot make a "right click".
On mobile often a right click is performed via long press so this would be a possible way for having that.
Is there already available something for a context menu on mobile that I am missing?
Thank you and best regards.
Since you used an own implementation of the svg-pan-zoom library and haven't hosted it anywhere on the public npm repos, I can't access the code, because our proxy repository doesn't allow to access npm packages directly from github pages (for good reason though).
Is it possible to
hello and thanks a lot for the library
I want to switch to your library
I looked at the functionality and almost cried because everything was implemented at once. "out of the box"
On the current library, I had to write everything myself.
I didn't find only options for the two features I needed
thx for your response!
Hello,
I wanted to know, with node selection enabled, why on mobile/tablet "tapping" a node does not select the node itself.
Using the capture all exampe I can see that clicked and selected are not fired, but pointerdown, pointerup and many other node events are fired, and generally mobile seems to be well supported
Many thanks
Hi dash,
I don't know if it is just me or something that I may be using wrong. But I found that when I change between router-links and the unload event is triggered after I leave the component where the v-network-graph is loaded, two more events are triggered (zoom and pan) causing to increase the size of the nodes and move the position at the last second of the transition... is it posible to stop those events from being triggered?
Thanks for the very useful component. I'm not an expert at Vue or Javascript and am trying to place a new node on a v-network-graph at a position defined by a drag-drop event. One of your examples has a button that creates a new node at the center of the graph. How would I instead place the new node at a desired position. In my case, the SVG element is of width and height 400, with the upper left corner (0,0) and the lower right corner (400,400). I can obtain a SVGPoint location in this reference frame from a drag-drop event.
I can almost create the desired behavior by setting layouts.nodes[new_nodeId] = {point.x-200, point.y-200}, but that doesn't work well, especially if there is pan/zoom/scale involved. And it doesn't take into account possibly overlapping nodes.
Is there some way to access setNewNodePositions()
in src.layouts.simple.ts, or is there a better way to create a node at a desired SVGPoint location? A brief example would be very helpful.
If it helps, in my onDrop(evt) method, I obtain the drop point location as:
onDrop(evt) {
evt.preventDefault();
var pt = this.svg.createSVGPoint();
pt.x = evt.clientX
pt.y = evt.clientY
var svg_pt = pt.matrixTransform(this.svg.getScreenCTM().inverse())
}
this.svg
is obtained from a ref="graphRef" on the v-network-graph: In mounted() I have: this.svg = this.$refs.graphRef.svg
.
John
Hi,
when using your awesome library with TS, I run into a warning in my IDE because of missing type declarations.
I'm using the RecursivePartial to properly type the main configuration. And since it is not referenced in the index.d.ts TS does not know the type declarations.
Is it possible to add common/common.ts to the exported type information?
// @ts-ignore because of Cannot find module 'v-network-graph/lib/types/common/common' or its corresponding type declarations.
import { RecursivePartial } from 'v-network-graph/lib/types/common/common'
...
const mainConfig: UnwrapNestedRefs<RecursivePartial<Configs>> = reactive({})
There are events for view, node, edge and path clicks. It would be useful to have a separate event for double-click.
I have tried to handle this in the event handler, but my solutions were a bit complex. It would probably be simpler to handle at the library level.
Defining an edge marker color works if the color value is in hex format (e.g., #212121
). However, if the edge marker color is specified using non-hex color formats, such as rgba(128,128,128,0.35)
or var(--my-color)
, then the edge marker does not appear when rendered.
Please see this line:
v-network-graph/src/composables/marker.ts
Line 30 in f639a8f
The m.color.replace("#", "")
expression referenced above allows parentheses (
and )
and comma ,
and period .
to be included in the id string. Then, when sourceMarkerId
and targetMarkerId
are referenced in edge.vue template, the url(...)
value becomes invalid. See lines 41-42 and 49-50 below.
v-network-graph/src/components/edge.vue
Lines 36 to 51 in 919511e
In edge.vue, please consider wrapping the inner part of url(#...)
in single quotes, like this: url('#...')
:marker-start="state.sourceMarkerId ? `url('#${state.sourceMarkerId}')` : undefined"
:marker-end="state.targetMarkerId ? `url('#${state.targetMarkerId}')` : undefined"
And, in marker.ts, perhaps add more logic to remove special characters:
m.color.replace("#", "").replace("(", "").replace(")", "").replace(",", "_").replace(".", "")
Thank you for considering this issue.
Hi,
Is there an example or best practice on loading nodes and edges via Axios calls? I want to be able to build my network graph dynamically.
thanks
Was wondering if there is a provision to add this to Vue 2 projects
What do you think of victor as dev dependencies?
It is pretty unmaintained (last update 6 years ago, some issues open, some PR open)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.