emiliorizzo / vue-d3-network Goto Github PK

Hi Emilio,

This component is highly appreciated!
One question; is it possible to set the color of each link separately (similar to how we can color the nodes)?

Best regards,
Gerwin

the touch event trigger both the mouse and the touch event thus having 2 event called at once

Is it possible to expose the node hover event?
For my use case, I don't want to display names on the graph, I think it gets too complex, but showing names on hover seems like a good trade-off.
I don't know if this would be too complex. I am willing to have a look when I have a bit more time and possibly submit a pull-request if I can figure it out

Could some one point me in the right direction of modifying this so the labels will show inside the nodes rather than float to the side of them?

Hi Emilio,

Thanks for this component, it's awesome!

Issue was coding...

Thanks!

` ```
data () {
return {
nodes: [
{ id: 1, name: 'my awesome node 1' , visible: true},
{ id: 2, name: 'my node 2', visible: true},
{ id: 3, name:'orange node', _color: 'orange', visible: true},
{ id: 4, _color: '#0022ff', visible: true},
{ id: 5 , visible: true},
{ id: 6 , visible: true}
],
links: [
{ sid: 1, tid: 2, visible: true },
{ sid: 1, tid: 3, visible: true },
{ sid: 1, tid: 3, visible: true },
{ sid: 1, tid: 4, visible: true },
{ sid: 1, tid: 5, visible: true },
{ sid: 1, tid: 6, visible: true }
],
nodeSize:100,
canvas:false
}
},
methods: {
findthisNode (nodeId) {
let result = utils.findNode(this.nodes, nodeId)
return result
},
selectNode (node) {
this.findthisNode(node.id)
},
nodeClick (event, node) {
this.selectNode(node)
let resultofLinks = utils.findLinks(node.id, this.links)
resultofLinks.forEach((element) =>{
if (element.visible == true) {
console.log('element is true, attempting setting false')
element.visible = false
element['_svgAttrs'] = {'display': 'none'}
} else {
console.log('element is false, attempting setting true')
element.visible = true
element['_svgAttrs'] = {'display': 'visible'}
}
})
}
},
computed: {
options(){
return{
force: 5000,
nodeSize: this.nodeSize,
nodeLabels: true,
canvas: this.canvas,
size: {w: undefined, h: undefined}
}
}
},
mounted () {
this.options.size.w = this.$el.clientWidth
this.options.size.h = this.$el.clientHeight
},
components: {
D3Network
}
}

I try to zoom & pan the network svg. Is there any example code in here? Please help me, Thanks for making useful repository.

Hello, for whatever reason my links arent rendering in svg mode but work fine in canvas

Having a function passed as :node-click, it runs also when dragging (specifically, on dragend), which is fair enough because a drag might be considered a click, but not being able to cancel this doesn't really work for my use case.

Is this the intended behaviour?

A feature request, it would be nice if we could override the default lineWidth like how you did with _color.

I tried to use _svgAttrs: {"stroke-width": 10} but it does not seem to override the default.

https://jsfiddle.net/aym91pek/

Can you either allow overriding via _svgAttrs or make a linkWidth property settable on a per node basis?

Thanks,

Other than the colors, it would be nice to have the possibility to use figures as background of the nodes. This way one could use icons and represent different types of nodes with different icons. This would require to render the nodes as svg groups and then append to each group the circle and an svg figure with its xlink:href attribute.

Do you see any easy workaround to this?

Hi! I'm here to report a rather strange bug I believe I have found.

I am attempting to draw a graph with 3 links across 5 nodes. The nodes are a subset of a larger set of nodes, and as such their ids are not sequential from zero. Namely, I have:

links = [
  {sid: 4, tid: 7, uid: 1, cc: "US", zip: "11213"},
  {sid: 4, tid: 2, uid: 1, cc: "US", zip: "11213"},
  {sid: 0, tid: 1, uid: 1, cc: "US", zip: "11213"}
]

// The graph deals with identities
nodes = [
  {id: 1, name: "Animal", value: 0.37},
  {id: 2, name: "Religion", value: 0.285},
  {id: 7, name: "Sibling", value: 0.285},
  {id: 0, name: "Human", value: 0.03},
  {id: 4, name: "Profession", value: 0.03},
]

When I attempt to run the graph, I see this error in the console:

Error: missing: 0

Looking at the data, I see that the id value of the "Human" node has been inexplicably re-written to have a value of 3. It seems as though this happens at some point during the render. If I set the following ncb function:

ncb (node) {
  console.log(["ncb", node.name, node.id])
  return node
}

I see the following in the console:

> (3) ["ncb", "Animal", 1]
> (3) ["ncb", "Religion", 2]
> (3) ["ncb", "Sibling", 7]
> (3) ["ncb", "Human", 0]
> (3) ["ncb", "Profession", 4]
> (3) ["ncb", "Animal", 1]
> (3) ["ncb", "Religion", 2]
> (3) ["ncb", "Sibling", 7]
> (3) ["ncb", "Human", 3]
> (3) ["ncb", "Profession", 4]
> [Vue warn]: Error in callback for watcher "netLinks": "Error: missing: 0"

It looks as though at some point during the first iteration of the graph render (but not before), the id field of the "Human" node is updated (to what appears to be the index value of that node in the nodes array). What's strange is that only the node with id = 0 is update -- the other nodes retain their original id values.

Does anyone have any insight? I don't think the issue is with my code, although I could always be mistaken.

In this image above you can see the node 2 is awkward position...

that is because i have an element that is computed and set visible to false, only to be revealed in later toggle manner

I amended the code in the svg
in line 16: path(v-for="link in _links"
in line 28: template(v-for='(node,key) in _nodes')

_nodes () { return this.nodes.filter((el) => el.visible) }, _links () { return this.links.filter((el) => el.visible) }

So maybe you can give me some hindsight of behavior pattern

would be nice to have something to zoom to fit like this

http://bl.ocks.org/TWiStErRob/b1c62730e01fe33baa2dea0d0aa29359

when i use too much force or too little

Hi, bellow my configuration:

<template>
  <div class="page-home">
    
    <d3-network 
      :net-nodes="nodes" 
      :net-links="links" 
      :options="options"
      :nodeSym="nodeSym"/>

  </div>
</template>

<script>

/* eslint-disable */

import D3Network from 'vue-d3-network'

export default {
  name: 'home',
  data () {
  	return {
  		nodes: [
        { id: 'ri', name: 'Master', _size: '100', svgSym: '@/assets/img/icons/ri.svg' },
  			{ id: 'pl', name: 'Sub1' },
        { id: 'sl', name: 'Sub2' },
  			{ id: 'sp', name: 'Sub3' },
  		],
  		links: [
        { tid: 'ri', sid: 'pl' },
        { tid: 'ri', sid: 'sl' },
        { tid: 'ri', sid: 'sp' },
  		],
  		options: {
        force: 10000,
  			canvas: false,
        nodeLabels: true,
        nodeSize: 50
  		},
      nodeSym: 'ri.svg'
  	}
  },
  components: {
    D3Network
  }
}
</script>

and is it showed

http://prntscr.com/kfjt4d

Is there a pre-implemented way to collapse/cluster nodes on click? Otherwise, would such an implementation be compatible with your framework?

Hi,
i would like if is possible to draw an ring on the node in the case the sid and tid are the same.
Thanks

Hi, how do you define custom force... I dont see any examples. Would appreciate any help given.
this.force = d3.layout.force()
.linkDistance(60)
.charge(-50)
.gravity(0.05)

thanks

Cool stuff Emilio !
Would it be possible to add a link "label" property & draw it ? That would be awesome.
Thanks!

I am setting the svgSym on nodes via nodeCb when they are created. I haven't figured out how I can change svgSym later on and have the node's graphic change. Does anyone have a suggestion on how this might be done? Thank you.

When updating data, only the points that change in the graph are changed

Hi Emilio,

I am currently using this component and try to render a graph with ~450 nodes and ~1600 links. This renders just fine in Chrome, but in Safari and Firefox there seems to be a lag in the animation when loading the graph (the framerate seems to drop). This also happens to your example when creating a lot of nodes with a lot of links (https://emiliorizzo.github.io/vue-d3-network/). Do you recognize this issue and maybe know a solution for this?

Thanks in advance!

Best regards,
Gerwin

Hi,

I would like to listen to the click event on the nodes $on('node-click').
I have added a method

displayIcoDetails(){
	this.$on('node-click', function (node) {
	console.log(node);
	});
}

the method is called in the mounted section. I expect as soon a node is clicked, the console logs the data from the clicked node to the console.
However, I don't receive any information. No exception or error occurs.
Would be great if you can point me in the right direction.

Thanks!

Is it possible to create 2 or 3 links between 2 nodes. Seems to be overwriting. Typically in networking you would have a primary and secondary link going from 1 router/node to one or multiple router/nodes.

I have a large disconnected graph and my nodes are going out of the bounding box. I am trying to force the nodes positions to keep them on the borders and to obtain something like https://bl.ocks.org/mbostock/1129492. It would be nice to have this option.

Unfortunately I'm really new to vue and I'm not sure how to proceed: I see I could listen for the 'tick' event on the simulation object but apparently your vue implementation works a little bit differently...

Is there a way to add multiple text fields for a node? In our case we're needing to label ports that the lines come in on.

Any help would be greatly appreciated!

Firstly, this project is really useful and helpful, thanks for your contribution.
I encounter a problem. I need to pull the new data back every 5 seconds, and when the data is changed, the nodes are flying into the center. Can I add any argument in the options to stop the flying nodes when we do refresh the data?

I tried to use svg symbols for nodes. This is my HTML.

    <body>
        <div id="app">
            <svg>
                <symbol id="sym01" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" stroke-width="5"stroke="blue" fill="red"/></symbol>
            </svg>
            <d3-network :net-nodes="nodes" :net-links="links" :options="options"></d3-network>
        </div>
    </body>

and then in my nodes list I have:

{ id: 2, name: 'my node 2', svgSym: '<svg class="icon"><use xlink:href="#sym01" /></svg>'}

1. Am I using symbols correctly?
2. In the graph options I have nodeSize: 50 and this makes 'regular' nodes have width and height equal to 50 (radius is 25), but it makes my 'special' node with id:2 have width and height equal to 25 (radius is 12.5). I guess somewhere you have something that defines width and height of the embedded svg as half of the value specified in the nodeSize attribute. Is this discrepancy intentional?

A jsfiddle here: https://jsfiddle.net/valenz/ung6t3w4/

Hello Emilio! , I found this repo and it was really useful to see what you did. I'm trying to do an UI for Neo4j Database. I do not know if you're familiarised with this but I wanted to know if you'd be interested to support it in the future?

gracias genio :D

I just noticed that in your live example on https://emiliorizzo.github.io/vue-d3-network/ the .link paths still have a fill. This leads to artifacts when disabling the "Straight links" option.

ERROR Failed to compile with 1 errors 3:57:14 PM

error in ./~/vue-d3-network/src/components/canvasRenderer.vue

Module build failed: Unknown word (447:0)

445 |
446 |

447 | canvas
448 | position absolute
449 | top 0
450 | left 0

@ .//vue-style-loader!.//css-loader?{"minimize":false,"sourceMap":false}!.//vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-15adbfe7","scoped":false,"hasInlineConfig":false}!.//stylus-loader?{"sourceMap":false}!.//postcss-loader!.//vue-loader/lib/selector.js?type=styles&index=0!.//vue-d3-network/src/components/canvasRenderer.vue 4:14-393
@ .//vue-d3-network/src/components/canvasRenderer.vue
@ .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!.//vue-d3-network/src/vue-d3-network.vue
@ .//vue-d3-network/src/vue-d3-network.vue
@ .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./src/views/clue/report/list.vue
@ ./src/views/clue/report/list.vue
@ ./src/routes.js
@ ./src/main.js

    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"

This fiddle: https://jsfiddle.net/valenz/977c9cfg/1/ only works if I move the node with id = 0 in the first position of the nodes array. Is there any particular restriction on the nodes order? Is '0' a special id?

HI,Your example is great.I hope that your component can achieve the click effect similar to neo4j graph database node, click the node can appear buttons, choose to show or hide the node relationship, want to know if you can add buttons in the outer layer of the node, can you give me some suggestions? thanks. @emiliorizzo

Is it possible to draw links as arrows, and also enable self linking nodes?

https://stackoverflow.com/questions/16358905/d3-force-layout-graph-self-linking-node

is it possible to add the circle and link visible property? like isVisibleSetFalse: true
basically i wish to toggle the root and tid linked to the node aka children can be toggled. Hope you would give me an idea. :)

Hi Guys,
diagram.txt
ace.txt

This is probably just me having limited experience with svg than an actual issue. But some help would be greatly appreciated.

Below you will find my vue component, which has a svg image file in the same directory called ace.svg.

See component and ace.svg attached.

When using the <img src="./ace.svg" /> it renders and image is shown in the browser, but i'm unsure of how to use it inside the nodes array, specifically the svgSym: ????

I have a suspicion that I need to somehow convert the image to svg inline? If that's the case, any examples available perhaps?

Is there a way to freeze the layout and disable the node animation? I have a use case when I show specific nodes and links, the entire layout should remain still.

In your jsdiffle (https://jsfiddle.net/emii/ru24unsz/) there is an error in the console:
Cannot read property 'w' of undefined
at VueComponent.onResize (vue-d3-network.js:3080)
at VueComponent.boundFn [as onResize] (....)

I don't know the reason...but I wanted to let you know

How can i include your library into my project?
What loaders i need to use? Can you share sample config please?

Hi, @emiliorizzo

I hope it resizes when I change the browser's size.
Is there a way to do it?

Thanks in advance.

BRs.
Taemin

Hi there,

I am starting to use this component in my BA thesis project.
Since I need more advanced graph manipulation features (like zoom-to-fit, grouping, filtering, ...), I will probably fork this and send you PRs to merge them back, as soon as the thesis was graded (cant publish this before).

One thing that bothers me right now is that the component seems to add 4px to its height, instead of staying in the parents container. I do not have time to investigate this right now, but you mitigated this by using height: calc(100%-4px); in the example.

Cheers,
Lukas

https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048
How can I make a network like this? D3 has a line value option to draw a distance between nodes.

The error is this:
failed to load resource with 404 error (HTTP/2.0) vue-d3-network.js.map

It concerns my project

It only occurs in Safari. You can test it in my demo