Currently, I'm trying to have a family tree which will have
Spouses/Partners (Multiple)
Children of Spouses/Partners
I want to get this done in React.js, and I am using VX for it.
As per D3 tree structure, we could have only one parent for a child, so in order to generate a tree as per my choice, I had to align partners as children of a member. And with additional JSON key, I style the partners. See the example below.
The same is available in my repo
I am impressed the way how Cyril Cherian tried to implement the tree with partners in this JSFiddle
`https://jsfiddle.net/cyril123/fcd5q8fv/1/`
and I made a fork of it (Javascript)
`https://jsfiddle.net/Vaishak/x6bg9dcu/`
and made some changes.
But the problem with this is that it cannot have multiple spouses/partners in a clean/straighforward way, will have to modify the JSON very badly.
Same JSFiddle script is also avalable in my repo
I would like to have the mix of both, where
Partners will be aligned with member of the tree
Partner will not have the line from any other node (unless mentioned)
Children will be originating from the mid of Partners line
Any solution here? :)
Note: I've posted the same on VX's github issue page, not sure whether this will be addressed there.
For making it easier for people who look for answer for this question.
I could tackle it down and got solution as seen here
Please feel free to look at the data structure and the way I drew spouse line.
Related
I'd like to achieve something similar to this diagram using d3:
https://gojs.net/latest/samples/records.html
I was trying to look it up on the web but I hardly found any resources to get started with.
I'm quite new to d3 so I don't know how to approach this task, any help or guidance would be appreciated!
This is another one of those questions where people need to implement a sophisticated diagram visualization and they think just because D3 is a lot about visualization, it will be a good fit.
IMHO it is not.
D3 could be a part of the solution, but it certainly cannot be the solution alone: It's almost like asking whether JavaScript can be used to create this kind of diagram. Of course it can! D3 is just a very thin (but very useful) layer on top of the DOM+JavaScript, that can help you with crunching numbers, work with colors, coordinate systems, create DOM elements, and simplifies working with the DOM. Think of it as jquery for DOM and data plus a lot of very nice demos. But the value very often is in the demos, rather than in D3 itself: You need to implement a lot of things to get from a simple mapping from data to dom elements to a sophisticated diagram visualization like the one you are referring to.
If you don't want to implement and maintain most of the low-level diagram logic yourself, you should rather be looking at a diagramming solution, rather than a tool that will help you create SVG elements elegantly with less code.
Look at this question to see a list of graph and diagram visualization software. Agreed, D3 is also on this list (for the same reason you are asking this question), but there are also far more capable tools on that list that you should be looking at, my recommendation being either the one that you've found already or preferrably this one if your requirements are more sophisticated.
I currently have this graph implemented and I'm hoping to keep the structure and collapsibility while depicting a child node having multiple parents. Is there a way to do this? I looked into force graphs but I'm also wanting to preserve a set hierarchy (meaning a parent at level 1 can have a child and level 3 shown). After a lot of research and tinkering with my current code, I am unable to figure my issues out. Is there anyone who has any experience with displaying a D3 tree node with multiple parents?
Just in case anyone was wondering what I did to answer my question. I ended up making a force diagram behave in the same manner as a tree. This provided me the possibility of having multiple parents and I just had to do some fiddling with how the diagram used forces in order to preserve hierarchy.
I'm using the cytoscape.js graph library on a website I am creating here:
http://consulting.citi.co.uk/
My query is, does anyone have an example using Dijkstra algorithm or Traversing to show multiple relationships on node select / hover? I have made it work using the demo, but it only traces one route on load:
How to highlight the path between two nodes in CYTOSCAPE JS
I'm not sure I understand. Do you mean you want to show the directly connected relationships? In that case, it's even simpler than Dijkstra or BFS: You can use the neighbourhood: http://js.cytoscape.org/#collection/traversing/eles.neighborhood
Or maybe you're looking for something more along the lines of the BFS demo? http://jsbin.com/gist/7e2f4d29ff7ef1a1bba5?js,output
I'm looking for some guidance in approaching a tree/graph traversal problem with the following
specifications:
There is one root node.
The root node can potentially have infinite child nodes.
Each child node can have only one parent, but can also itself be parent to potentially
infinite child nodes, and so forth.
This will, in a real-world scenario, in most cases be a small structure. However, it should
still work for large structures, with regards to traversal and deletion.
I'm most concerned with deletion, as deletion of a node MUST delete any of node's children,
grand-children, etc. as well as any reference to the deleted node in the parent.
How would I approach this problem with efficiency in mind. I'm looking to implement something in Javascript/JQuery. I hope this is enough information and any advice is very much appreciated.
Thank you.
* EDIT/UPDATE *
I think the structure described above will most closely resemble a directed graph and due to potentially infinite child nodes at each level, will not be a binary tree. Also, I don't know if I'm articulating this properly, but the structure is not laid out according to its node relationships, in the actual HTML code. In other words the visual/code design of the structure does not match the various parent/child relationships that are present in the JSON representation for example. This was a choice made by someone else but regardless, it is my job to implement traversal,insertion, and deletion.
I've looked around some more on SO and found the following link:
How to delete all related nodes in a directed graph using networkx?
The first answer in the link above is the closest I've found so far to a solution. But I don't understand how the "Worklist Algorithm" mentioned in the first answer, goes deeper than the first level?
Again, any help is appreciated.
I have a dataset which is best represented by a graph. It consists of nodes of 6 or 7 different "types" with directed edges (dependencies on one another, guaranteed not to have cyclic dependencies). The dataset is essentially a template of a layered configuration, and the user needs to be able to select bits and pieces of the configuration from different layers which are desired, and have the dependent bits be brought in automatically.
The general UI need is for a user to select or un-select items from multi-select boxes (one such box for each node type), and have "depended-on" items in the other boxes become selected or unselected as needed. I need to be able to pull down the dataset from the server, let the user select the desired bits (with the dependency processing being done in javascript on the client side for responsiveness), and then submit the result back when they are finished.
The dataset is large and complex enough that actually showing it as a graph would be overwhelming and confusing to the user. Only basic graph traversal operations are needed, since all that is required is to cascade selections out the dependencies. (For example, a user un-selecting a node would result in that nodes dependencies becoming unselected if there were no other selected node which still depended on them. A user selecting a node would result in all of that node's dependencies becoming selected.) A simple depth or breadth first search following directed edges from the start node will suffice to visit all affected nodes. If I can follow edges either direction, bonus. (If not I can easily generate an edge-reversed graph and use that when needed.)
I have dug around on here and found references to a number of javascript graph visualization libraries, but most of these discussions seem to interpret "graph" as "chart" and I have no charting needs here. My digging has led me to this list: Raphael, protovis, flare, D3, jsVis, Dracula, and prefuse. From this list it looks like jsVis or Dracula might have the underlying graph constructs I need if I just ignore the visualization side, but it isn't clear to me from the documentation if that is the case. I have to rule out a few others because I cannot bring in any flash dependencies. Unfortunately I don't have time to prototype things with this many libraries. (I will be digging into jsVis and dracula more though, barring some handy input here.)
If anyone has experience with something from that list and believes that the graph portion of it can be used independently of the visualization portion, that will certainly meet my needs. If there is some other library I could use that meets my needs, that would be great too. One final requirement regarding licensing: the library needs to be "free" in a non-copyleft way - So ideally Apache v2.0, BSD, MIT, or something like that.
I haven't used it, but you might want to check out data.js. It's an MIT-licensed library with a range of data-structure utilities. In particular, it includes Data.Node and Data.Graph:
A Data.Graph can be used for representing arbitrary complex object graphs. Relations between objects are expressed through links that point to referred objects. Data.Graphs can be traversed in various ways.