3 ms·

I was in the same boat, but I stumbled upon http://www.jsgraphs.com/ http://www.jsgraphs.com/ most are based on d3 and they simplify using it. I just picked t

by tmaly 11y ago

I was in the same boat, but I stumbled upon http://www.jsgraphs.com/ http://www.jsgraphs.com/ most are based on d3 and they simplify using it. I just picked the one that had the features I needed

ColinWright 11y ago
Thanks for the reply ... I've spent hours searching for a clean example that has the features I want. I can't believe that what I want is new, or even unusual, and yet I can't find an example to copy and mutate. I want * text boxes containing a small amount of text - about 10 words - that are connected by arrows; * force directed layout, with the ability to drag boxes, and in some cases pin them in place. * Buttons to click on the arrows with call-backs that adjust the underlying data * Buttons to click on the boxes with call-backs that adjust the underlying data I find it hard to believe no one has done this, and I find it hard to believe, looking at all the D3 stuff out there, that this is difficult. Many, many hours of searching is making me doubt my beliefs.
- potatosareok 11y ago
  Hi Colin - I had to implement something with d3 force before that might be kind of similar. I hadn't used d3 before so my solution is pretty hacky. - http://bl.ocks.org/mbostock/3750558 http://bl.ocks.org/mbostock/3750558 - for basis of pinning nodes. - setting CSS marker-end attribute on the line to get arrow (based off this example but in the end I didn't need as fancy as them so I just set it on all .link instead of dynamically: http://bl.ocks.org/mbostock/1153292 http://bl.ocks.org/mbostock/1153292) I basically throw my data into there and let force directed work it out. Then I manually pin any of the nodes I want and basically have a save functionality, so next time I load the graph, any pinned nodes are back in the same place. I'd share the code but it's work and besides which, it's pretty simple (each graph has an id, there's a db I have where I store (id) => text(string(graph => json))). As for boxes of text it shoudn't be too different then with circles - I personally went with onHover using qTip.s for extra data (my node are either circle or some custom images, and they all have a text besides them that is server fqdn). Not entirely sure where you want the buttons to be in this graph though.
  - ColinWright 11y ago
    That's definitely part of the solution I need - thank you for that. I'll take a copy and see if I can munge it with some of the other things I need. Cheers!

by tmaly 11y ago

I was in the same boat, but I stumbled upon http://www.jsgraphs.com/ http://www.jsgraphs.com/ most are based on d3 and they simplify using it. I just picked the one that had the features I needed

ColinWright 11y ago

Thanks for the reply ... I've spent hours searching for a clean example that has the features I want. I can't believe that what I want is new, or even unusual, and yet I can't find an example to copy and mutate. I want * text boxes containing a small amount of text - about 10 words - that are connected by arrows; * force directed layout, with the ability to drag boxes, and in some cases pin them in place. * Buttons to click on the arrows with call-backs that adjust the underlying data * Buttons to click on the boxes with call-backs that adjust the underlying data I find it hard to believe no one has done this, and I find it hard to believe, looking at all the D3 stuff out there, that this is difficult. Many, many hours of searching is making me doubt my beliefs.

potatosareok 11y ago
Hi Colin - I had to implement something with d3 force before that might be kind of similar. I hadn't used d3 before so my solution is pretty hacky. - http://bl.ocks.org/mbostock/3750558 http://bl.ocks.org/mbostock/3750558 - for basis of pinning nodes. - setting CSS marker-end attribute on the line to get arrow (based off this example but in the end I didn't need as fancy as them so I just set it on all .link instead of dynamically: http://bl.ocks.org/mbostock/1153292 http://bl.ocks.org/mbostock/1153292) I basically throw my data into there and let force directed work it out. Then I manually pin any of the nodes I want and basically have a save functionality, so next time I load the graph, any pinned nodes are back in the same place. I'd share the code but it's work and besides which, it's pretty simple (each graph has an id, there's a db I have where I store (id) => text(string(graph => json))). As for boxes of text it shoudn't be too different then with circles - I personally went with onHover using qTip.s for extra data (my node are either circle or some custom images, and they all have a text besides them that is server fqdn). Not entirely sure where you want the buttons to be in this graph though.
- ColinWright 11y ago
  That's definitely part of the solution I need - thank you for that. I'll take a copy and see if I can munge it with some of the other things I need. Cheers!