Comments (8)
thx for your response)
yes, I saw this example, but as far as I understand, font-family is connected there: 'Material Icons';
of course, you can develop your own set of icons, and insert them into the desired nodes. it was interesting if there is already implemented functionality, because it would be easier and more convenient to send a link to an image with a 'backand' in the node parameter itself
You do not need icons - just put in a custom node with circle and an image. The image link (in this example static) can be accessed via the nodeId and can be set dynamically. I just tried it with the following and it worked
<v-network-graph
:nodes="nodes"
:edges="edges"
:configs="mainConfig"
:event-handlers="eventHandlers"
:layouts="layouts">
<template #override-node="{ nodeId, scale, config, ...slotProps }">
<defs>
<clipPath id="myCircle">
<circle cx="70" cy="70" r="70" fill="#FFFFFF" />
</clipPath>
</defs>
<image width="70" height="70" xlink:href="/image.png" clip-path="url(#myCircle)" />
</template>
</v-network-graph>
from v-network-graph.
by the way, have you tried to implement v-network graph on vue 2?)
No, I'm using Vue 3 and I think it only supports Vue 3.
from v-network-graph.
Hi @N1neTa1ls,
Thank you for your contact. I hope v-network-graph will be useful to you!
And, @markus-ebner, thank you very much for your grateful help!
- tooltip displaying additional information about the node (for example, right click opens the context menu)
It's mostly as @markus-ebner answered.
In addition, I extended the v-network-graph a bit to make it easier to get the right click event. (v0.3.4)
And I made a displaying context menu by right-click example:
https://dash14.github.io/v-network-graph/examples/event.html#context-menu
- algorithm for finding the shortest path to node (A*, Dijkstra's algorithm)
v-network-graph is focused on drawing graphs, and there is no plans to include any algorithms at this time.
I made an example that applies an algorithm to a graph structure passed to v-network-graph and draws the result. It uses the Dijkstra algorithm.
https://dash14.github.io/v-network-graph/examples/misc.html#find-the-shortest-path
I hope this is helpful.
from v-network-graph.
Hi @N1neTa1ls,
Thanks for the reply.
As for how to use photos as nodes, it's mostly as @markus-ebner wrote, but I made an example.
https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node
(It is placed below the example of using the icon.)
I hope this will be of some help to you.
from v-network-graph.
Hi @N1neTa1ls,
I think I have some solutions or workarounds for your first 2 problems:
- You could try to create a custom node where you put in an
<image>
into it (image instead of img in svg). I guess that could work and you can see the example about custom nodes at https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node. - I've had the same challenge: You will get the position of the node through different events. I'm opening a tooltip on
node:pointerover
and get the absolute position of the node through the following function:
function getPositionAttributesOfElement (element: HTMLElement): { top: number; left: number;bottom: number; right: number; width: number } {
const rect = element.getBoundingClientRect()
return { top:rect.top + window.scrollY, left: rect.left + window.scrollX, bottom: rect.bottom + window.scrollY, right: rect.right + window.scrollX, width: (rect.right - rect.left) }
}
From there you could position your tooltip somewhere near your node with some specified offset.
Unfortunately, I can't help you with your third challenge, but the creator @dash14 will certainly react to your comments pretty fast. ;)
from v-network-graph.
- You could try to create a custom node where you put in an
<image>
into it (image instead of img in svg). I guess that could work and you can see the example about custom nodes at https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node.
thx for your response)
yes, I saw this example, but as far as I understand, font-family is connected there: 'Material Icons';
of course, you can develop your own set of icons, and insert them into the desired nodes. it was interesting if there is already implemented functionality, because it would be easier and more convenient to send a link to an image with a 'backand' in the node parameter itself
From there you could position your tooltip somewhere near your node with some specified offset.
I was thinking about something like this) make the context menu a separate diva and process it with the 'addEventListener' function
Unfortunately, I can't help you with your third challenge, but the creator @dash14 will certainly react to your comments pretty fast. ;)
by the way, have you tried to implement v-network graph on vue 2?)
from v-network-graph.
Hi @N1neTa1ls, Thank you for your contact. I hope v-network-graph will be useful to you! And, @markus-ebner, thank you very much for your grateful help!
- tooltip displaying additional information about the node (for example, right click opens the context menu)
It's mostly as @markus-ebner. In addition, I extended the v-network-graph a bit to make it easier to get the right click event. (v0.3.4) And I made a displaying context menu by right-click example: https://dash14.github.io/v-network-graph/examples/event.html#context-menu
- algorithm for finding the shortest path to node (A*, Dijkstra's algorithm)
v-network-graph is focused on drawing graphs, and there is no plans to include any algorithms at this time. I made an example that applies an algorithm to a graph structure passed to v-network-graph and draws the result. It uses the Dijkstra algorithm. https://dash14.github.io/v-network-graph/examples/misc.html#find-the-shortest-path I hope this is helpful.
wow, nice!)))
Thank you, so much work and all for me alone)
and about the first point, is everything as @markus-ebner wrote? or do you have any other ideas on how to implement a picture inside a node?
from v-network-graph.
I'll close this issue for now.
If you have any other questions, please open a new issue.
from v-network-graph.
Related Issues (20)
- Performance improvement HOT 2
- Unexpected behavior for path containing repeated edge IDs HOT 3
- Potentially unnecessary rendering HOT 2
- Error with curved edges & force layout HOT 1
- Make the graph fit to the edges of the canvas? HOT 7
- Binding does not work in my code HOT 2
- Dynamic node list, d3force and stored positions HOT 4
- Chose from where the edge are starting/ending
- How to avoid edge labels overlapping/obstructed by other nodes/edges? HOT 1
- Performance Issues HOT 1
- Failed to resolve import "v-network-graph/lib/layouts/force" Does the file exist? HOT 2
- Change default selection keys
- Bug: path does not update for computed prop HOT 1
- Add touch events for mobile
- `tick` not rendering properly in `ForceLayout`
- Documentation: Layer example not working
- Node width HOT 1
- Is it possible to set different width for edges or paths between nodes? HOT 1
- Reactive defineConfigs? HOT 1
- Summarized edges markers behavior
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 v-network-graph.