I've managed to create some graph using dagre-d3 graph layout library. The library works wonderful but seems a bit lacking in documentation.
My graph really looks like this example: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html
What I really want to do is to customize the edges so they will look like this picture:
So, basically, I need to customize the svg path element representing the edge. I did some research and it seems possible to use graphviz styles (arrows, colors, etc) but hasn't found any way to customize the connection path itself.
Is it possible to customize it somehow?
Check out this graph. It shows how to use styles on edges, change the way the edge is layed out (lineInterpolate), and how to remove the arrowhead.
For more details on styling, see https://github.com/dagrejs/dagre-d3/wiki#demos. In particular, the following may be helpful:
Style attributes: https://dagrejs.github.io/project/dagre-d3/latest/demo/style-attrs.html
Built in shapes: https://dagrejs.github.io/project/dagre-d3/latest/demo/shapes
Built in arrows: https://dagrejs.github.io/project/dagre-d3/latest/demo/arrows.html
User defined shapes and arrows: https://dagrejs.github.io/project/dagre-d3/latest/demo/user-defined.html
tl;dr: Adding the property lineInterpolate: 'basis' while setting your edges will draw curved edges. For example,
...
g.setEdge('A', 'B', { lineInterpolate: 'basis' });
...
See this PR for more details.
Related
Is there a way to disable
subgraph(same graph but without clustering)
disable/hide labelling of vertex and hedge
without redifining the whole graph?
thanks
P.S: it is for teaching/presentation purpose
clusterrank=global (https://graphviz.org/docs/attrs/clusterrank/) should turn off the cluster features. This can also be with commandline option '-Gclusterrank=global'
If you are trying to change the default labels, try '-Elabel=""' and '-Nlabel=""'
Please help me create diagrams like these: (I tried, but stuck on setting up force layout)
Here is an implementation of ordinary D3 tree with "FISH" data:
The challenge is: How do we get diagram below from diagram above? (but without "hardcoding" of coordinates; this means, there is a need for applying force layout, or similar method)
Complete tutorial can be found here.
You should also read documentation for tree layout.
A few days ago I've explored geomaps and, however, it turned out to be easy to change the properties of the elements.
But I have two questions:
I'd like to add rivers and forests on the maps. So Ive considered to set a background image instead of the geomaps figure. But I can't find a way to get this one fixed. Is there a way to set a background picture for a country or region?
How can I change the shape of the "bubbles" when you select a city e.g. "London"? I'd like to change it to a square.
Thanks in advance for your help!
Unfortunately what you're looking for is not available in geocharts in their current implementation.
Using a background image is possible in the sense that you can use CSS to make all shapes in the map transparent, and use a background image in the div to make it appear as if the little circles are being drawn on a map with forest and rivers, but you will run in to two big hurdles:
Your map will need to be identical in size/layout to the Google Maps SVG
If Google ever changes the SVG they use (or the view/projection they use) you will need to edit yours too
This isn't ideal, obviously. You could work around it by creating custom javascript to write rivers and forests on your map, but that is going to be a huge headache (especially if you are using multiple maps/views).
As for the circles, you can't change them to squares without hacking the actual SVG in the background with javascript. While this is definitely possible (if you're really good with SVG/Javascript), it again isn't using any of the fancy features of geocharts, and is more just a custom solution that will have to be updated if/when google updates their API.
Rather than doing it that way, you may want to look in to the same implementation on google maps itself. That will allow you to use custom markers, draw custom shapes, etc. with a lot more flexibility (and a much more stable API).
I am implementing Cytoscape.js web 2.0. I am a bit confused on the difference between load and add. I understand that in load, we do not need to specific the positions of the nodes. I used add to add a node which works when I include the position attribute, but the edges do not show even when I add the position attribute. Also, what is the difference between load and add behind the scenes? I believe that load renders the entire graph, so every time we use load, it would re render the graph. It seems that add does not do that which is good for operational costs? Is that true?
Thanks!
Putting cy.add() outside of the object right after the full object is initialized allowed adding nodes to update the graph.
cy.load() is used to load a new graph and run a layout on that graph. This is deprecated in newer versions of 2.x and it's not available in 3.x! Run a layout after calling cy.add() if you want this kind of behaviour.
cy.add() is used to just add elements to the existing graph.
Is there a masonry type algorithm for d3.js? (a la isotope http://isotope.metafizzy.co/)
As a related question (if that's not available), how would I go about doing it? Specifically: I know the enter/update/exit paradigm of d3, but it seems like it treats all the points independently of each other. If I wanted to change the layout of the 2nd point, based on where I put the 1st point, how would I do that?
The matrix layout might be what you are looking for, you can see an example here: http://bl.ocks.org/mbostock/1009139
edit: just found a second example providing similar layout: http://bl.ocks.org/herrstucki/5684816
Here is a masonry layout for d3:
https://github.com/shawnbot/masonic
The demo:
http://shawnbot.github.io/masonic