I am trying to create a force graph with nodes on the links between main nodes (O--o--O), similar to this visualization: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html:
More specifically, I would like the links between nodes to start and stop at a main node (O), with a link node (o) at the midpoint. Is there a straightforward way to achieve this?
Generally: Create two classes or categories of nodes ("main", "midpoint") in your network data structure and conditionally set a node's radius and other style attributes based on class membership.
Related
When single node is dragged, other nodes and links don't follow along like in this graph example: https://observablehq.com/#d3/force-directed-graph
Here is the code: https://stackblitz.com/edit/js-xbmyr7?file=index.js
I have followed the 'template' solution typical of draggable graphs but am unable to understand why the rest of the graph does not move. All nodes and links are selected in the ticked function.
I working on a simple water pipeline path modelling and listing each path.
The model is simple because the pipes do not create loops or grids. It consists of nodes which are representing the edge of each pipe segment.
Based on this we can say it is similar to a Binary Tree data model. However, as I understand, trees are hierarchical data structures. And also, I see on https://www.geeksforgeeks.org/print-root-leaf-path-without-using-recursion/?ref=lbp that, data is defined with left-right-left.left etc, by describing the exact location of each node.
In my case, the data should include only the start and end nodes for each pipe segment. Each node should also include info if it is the source (root) or leaf node. Number of leaf nodes will be equal to number of paths.
My model does not require any hierarchy and also it does not require left-right definition.
In this case we may say it is similar to a Graph, but my model also does not have loops or grids.
So please advise how to model this and create an algorithm.
I would like to implement a graph in Java. I defined class Node and class Edge, and the graph is represented with a list of Node, and for each node, a list of edges starting from the node is defined as a field of the node. Now I would like to use some Java library to visualize the graph.
Currently I have tried graphviz-java. The result meets my requirement but the edges and nodes are not placed well. See the following graph below:
I created the graph with the API it provided like node(xxx), addLink() through traversing the node list of my graph instead of generating the raw dot file text.
The key code of creating the graph is as follows:
for (LiteralNode litNode : literalNodeArrayList)
{
MutableNode mutableNode = mutNode(litNode.getNodeElement());
for (Edge e : litNode.getEdgeList()) {
MutableNode endNode = mutNode(e.endNode.getNodeElement());
mutableNode.addLink(to(endNode.port(Compass.NORTH)).add(Arrow.VEE));
}
mutableNodes.add(mutableNode);
g.add(mutableNode);
}
It's basically simple traverse with loops. The node and edges are dynamically changed according to different cases.
I would like the node and edges adjust the location to make the graph display better. I have also tried using json file and d3js to visualize the graph but I found those libraries focus too much on displaying huge amount of nodes and their distributions, which I don't need. I like the structure graphviz provided with some stratification. So I would like to get some recommendation.
I mentioned the json file because if no Java library is available, I might as well try some javascript library like d3js and only use java as a backend tool to generate json file I need to input. So the recommendation is not limited to Java.
All graphviz attributes (https://graphviz.gitlab.io/_pages/doc/info/attrs.html) are supported.
Node distances are set with "ranksep" and "nodesep".
To force nodes on the same level, add a subgraph with "rank=same" and the nodes that should be aligned.
Here's a simple example:
Graph g = graph()
.graphAttr().with(attr("ranksep", .1), attr("nodesep", .1))
.with(graph().graphAttr().with(Rank.SAME).with(node("a"), node("c")))
.with(node("a").link("b"), node("b").link("c"));
The graph looks good to me. What do you mean by "I would like the node and edges adjust the location to make the graph display better."?
Is it possible to use D3 Trees and draw graph. Then let the user to rearange the nodes without changing their relationships?
I used d3 Tree functions to have the location of nodes and used my current forced directed graph. This way I could keep my current functionalities, and also having more than one parent for nodes, and user could move the nodes around. However, once user moves the node, I do not let d3 to rearrange the node when nodes is expanded. I want the node stays in the location that user moved and wants.
I need to show a data structure which is a hierarchical one's, except for one value I highlight on following image:
The two nodes Pages.app should be merged. I perform this structure with d3's tree layout. Can I merge this node with same layout, or should I find a graph one?