erdogant / d3graph

Creation of interactive networks using d3 Javascript

Home Page:https://erdogant.github.io/d3graph

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fixing the position of nodes

jesucastin opened this issue · comments

Hi, is there a way to specify custom XY coordinates in node properties? I want to arrange the nodes in various layouts.

I looked into this but choosing a specific layout is kind of hard because the nodes are freely moving. I did also experiment with a (un)freeze button that I created. The nodes could be frozen but correct dragging became challenging because of the network edges.

For the moment, I will not further investigate this for implementation until I see or hear a possible solution.

Thank you for this great tool. I would also like to know how to used fixed node positions.

My use case is to visualize networkx graphs in an interactive way (hover titles for nodes and edges, possibility to zoom) and thought a python library based on d3.js could be very helpful. I do not need the force and drag features at all and would like to just display the networkx graph as is.


import networkx as nx
from d3graph import d3graph, vec2adjmat

# Create a NetworkX graph
G = nx.Graph()
G.add_nodes_from([((0, 0), {"capacity": 10}), ((100, 100), {"capacity": 5})])
G.add_edges_from([((0, 0), (100, 100), {"weight": 4.2})])

adj_matrix = nx.to_pandas_adjacency(G)
positions = {node: node for node in G.nodes}

# Initialize
d3 = d3graph()
# Proces adjmat
d3.graph(adj_matrix)

# Plot
d3.show()

# Make changes in node properties
d3.set_node_properties(
    color=adj_matrix.columns.values,
)
# Plot
d3.show(filepath="c://temp/")

Edit: Will use dash_leaflet for the time being.