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.
Related
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."?
I am using the D3 force directed graph with collapsible nodes as described here
Is there a way to avoid the explosion that happens when the graph is initially loaded? Also, can we stop the movement/animation of nodes once the graph has loaded?
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 want to use d3 force-directed layout for visualizing my graph. However, I want to show edge direction since it is a directed graph. Is it possible to show this using d3?
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.