I have a directed acylic graph done with dagre-d3. Is there any possibility to put a node in a different level and change the position of a node with some code? This library has some 'rank constraints' but it looks like in the latest version it's not working. My current suggestion is adding some links and hide them after that, but it's the last possible option and I really want to avoid it.
Currently, my graph looks as follow and my goal is put one cluster under other
Related
I am trying to build a graphql schema visualizer using something other than viz.js (the library is too large and adds 1MB to the bundle). I was recommended webcola and it seems to be a very powerful library.
I have gotten to a point where the necessary elements are being rendered and linked correctly. My next step is to get the layout right. I would like to do something similar to graphql-voyager (uses viz.js).
Here is a codesandbox of what I have so far:
graphql-diagram
EDIT: My question is, how could I lay out what I have similarly to graphql-voyager? I would like help setting the right constraints and applying whichever algorithm necessary to position the nodes and routing the edges accordingly.
GraphQL Voyager author here :)
Before switching to viz.js we tried lots of other possible solutions for almost a month. Here is the article about our journey: https://medium.freecodecamp.org/how-we-got-1-500-github-stars-by-mixing-time-tested-technology-with-a-fresh-ui-b310551cba22
TL;DR; Graph drawing is rocket-science
Moreover, since Voyager release (2 years ago), we evaluated even more libraries with the exact same result.
As a side project, we are working on the Graphviz fork aggressively shrunk to just meet Voyager requirements. Our end goal is to rewrite the required parts in pure JS and embed it directly into Voyager.
ATM it's in early PoC stage and we are not ready to release it yet.
This is a question for those working with D3.js Sankey diagrams.
What is the recommended approach for organizing/creating the JSON data for these diagrams?
Every example I've come across involves the example creator having the JSON/CSV having at least one value for every node/link.
However, If you try to supply dynamic data where you don't know if everything will have a value, and if a node/link value is zero, the node floats to the top-left and it disconnected from everything.
Example:
The items in this picture I'm talking about are: "Fugitive Emissions", "Industry", and "electricity and heat"
Cleaning up these nodes seems non-trivial.
It would seem logical to somehow exclude them from the JSON data to begin with, but this feels like an overly complicated process.
I.E. If you remove a node in the JSON, you need to remove all links associated with that node, but this would seem to require a recursive check to ensure everything is kept clean.
I'm still searching for possible ways to have the D3 Sankey remove the nodes without values, but the crux of the problem seems to be that the SVG object is populated with data for nodes based on the JSON data supplied, not what is passed to the Sankey JavaScript code. I've tried filtering the nodes I don't want here, but it doesn't affect what has already been attached to the SVG (Which is ultimately displayed on the diagram).
Any suggestions are welcome regarding how to remove/filter nodes without values. Either an addition to the Sankey code, or a suggestion for organizing/filtering the JSON data to be supplied to the Sankey.
I am trying to organize the nodes to be in a specific way but no matter what I try, I just cannot do it. I am trying to get close to this:
I have many variations but here is what I have so far: https://gist.github.com/wpsmithtwc/3f82433d11b2e99cc65382bf231aa04c
(see GraphViz fiddle).
Any suggestions?
I am new to whole elastic stack so pardon me if this is basic. But looking into docs I can't find way how to make following graph.
I am feeding elasticsearch with data that looks like this. [{place:'a', time:0, user:1}, {place: 'b', time:1, user:1}, {place:'c', time:2, user:1}, {place:'a', time: 3, user:1}] It is describing path which user went. So for this one a->b->c->a, and some other one could go c->d->a->d->c.
Is is possible to make graph with vertices made out of places and edges describing where users went?
You can't create this visualisation, but its open issue in github
I'm currently trying to figure out how to shorten my extremely long xpath.
//div[#class='m_set_part'][1]/div/div[2]/div[#class='row']/div[#class='col details detail-head']/div[#class='detail-body']/div[2]/div/div[#class='size']/div/div[#class='m_product_finder_size']/ul/li[1]/span[#class='size-btn']/a
This is the one I have right now and it's way too long, the problem is I need the first node to differentiate between products. Is there a way to shorten it like
//div[#class='m_set_part']/*/span[#class='size-btn']/a
Or do I have to go through all childnodes to reach the last nodes?
Link
I want to find the for each product the sizebuttons. The only way to differentiate them, I guess, is via adding a [1] or [2] to the m_set_part node.
You are basically correct. As said in the comments, you can use // to select descendant or self nodes. Hence, this will give you all the size links:
//span[#class='size-btn']/a
As you suggest, you can select the specific product using a positional predicate. However, if you prefer you could also use another detail, e.g. the name. This would simply be
//div[#class="m_set_part"][.//label="Vælg"]
to given you the Vælg product.
Now combine them both and you can get the size link for this specifc product using
//div[#class="m_set_part"][.//label="Vælg"]//span[#class='size-btn']/a
or using the psoitional predicate it would be
//div[#class="m_set_part"][1]//span[#class='size-btn']/a
Also, please make sure you use a proper namespace as this is an actual XHTML document. One other thing is that you might prefer to use contains(#class, 'm_set_part') instead of #class="m_set_part" and the like, because the query will still work even if the add new CSS classes to this element.
To answer to your question: No you don't have to go through all nodes.
You may use the // descendant-or-self selector to 'skip' zero or more nodes in between the preceeding and the next part of the expression. So //div[#class='m_set_part']//span[#class='size-btn']/a might give you exactly what you want. * on the other hand matches any node, but exactly one node. Therfore
//div[#class='m_set_part'][1]/*/*[2]/*[#class='row']/*[#class='col details detail-head']/*[#class='detail-body']/*[2]/*/*[#class='size']/*/*[#class='m_product_finder_size']/*/*[1]/*[#class='size-btn']/a
is another way to shorten your original expression. Whether it's still returns only the interested node or more is solely depends on the document you apply the expression on.