|
| 1 | +# Advanced Customization Showcase |
| 2 | + |
| 3 | +This page demonstrates a graph with a wide variety of node and edge customizations, physics settings, and interaction options available through `vis_options`. |
| 4 | + |
| 5 | +The graph includes: |
| 6 | +- Nodes with different shapes, colors, sizes, and groups. |
| 7 | +- Fixed position nodes. |
| 8 | +- Nodes with multi-font labels. |
| 9 | +- Edges with different colors, widths, dashing, and labels. |
| 10 | +- Edges with explicit arrowheads. |
| 11 | +- Edges with complex color objects (including hover and opacity). |
| 12 | +- Node and edge size scaling based on attributes (`value` and `weight`). |
| 13 | +- Group-based styling. |
| 14 | +- An interactive configuration panel (usually appears at the bottom or can be toggled) to tweak Vis.js settings live. |
| 15 | + |
| 16 | +<div class="interactive-graph-wrapper" style="margin-bottom: 1.5em; padding: 1em; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #f9f9f9;"> |
| 17 | + <h4 style="margin-top: 0; margin-bottom: 0.5em; font-size: 1.1em;">Advanced Customization Example</h4> |
| 18 | + <iframe src="/nx-vis-visualizer/assets/generated_graphs/advanced_showcase_example.html" |
| 19 | + width="100%" |
| 20 | + height="700px" |
| 21 | + style="border: 1px solid #ccc; max-width: 100%; display: block;" |
| 22 | + sandbox="allow-scripts allow-same-origin allow-popups allow-forms"> |
| 23 | + Your browser does not support iframes. Please update your browser. |
| 24 | + </iframe> |
| 25 | +</div> |
| 26 | + |
| 27 | +The Python code to generate the graph structure can be found in `examples/advanced_showcase.py`. Here's a snippet of how nodes and edges are defined: |
| 28 | + |
| 29 | +```python |
| 30 | +# From examples/advanced_showcase.py (snippet) |
| 31 | +import networkx as nx |
| 32 | +import random |
| 33 | + |
| 34 | +def create_showcase_graph(): |
| 35 | + G = nx.Graph(name="Advanced Showcase Graph") |
| 36 | + |
| 37 | + # Special, styled nodes |
| 38 | + G.add_node( |
| 39 | + "Source", |
| 40 | + label="START", |
| 41 | + shape="diamond", |
| 42 | + color={"background": "lightgreen", "border": "darkgreen"}, |
| 43 | + size=30, |
| 44 | + fixed={"x": True, "y": True}, x=-400, y=-200, |
| 45 | + # ... other attributes |
| 46 | + ) |
| 47 | + # ... more nodes ... |
| 48 | + |
| 49 | + G.add_edge( |
| 50 | + "Hub", "Sink", weight=5, color="blue", width=4, |
| 51 | + title="Main link from Hub to Sink", arrows="to", |
| 52 | + smooth={"type": "curvedCW", "roundness": 0.2} |
| 53 | + ) |
| 54 | + # ... more edges ... |
| 55 | + return G |
| 56 | +``` |
| 57 | + |
| 58 | +The extensive `vis_options` used for this graph (defined as `custom_vis_options` in `examples/advanced_showcase.py`): |
| 59 | +```json |
| 60 | +// From examples/advanced_showcase.py (snippet of custom_vis_options) |
| 61 | +{ |
| 62 | + "nodes": { |
| 63 | + "borderWidth": 2, |
| 64 | + "scaling": { |
| 65 | + "min": 10, |
| 66 | + "max": 30, |
| 67 | + "label": {"enabled": True, "min": 8, "max": 20} |
| 68 | + }, |
| 69 | + "shadow": {"enabled": True, "size": 5, "x": 3, "y": 3} |
| 70 | + }, |
| 71 | + "edges": { |
| 72 | + "width": 1, |
| 73 | + "color": { |
| 74 | + "inherit": "from", |
| 75 | + "opacity": 1.0 |
| 76 | + }, |
| 77 | + "arrows": { |
| 78 | + "to": {"enabled": False, "scaleFactor": 0.8, "type": "arrow"} |
| 79 | + }, |
| 80 | + "smooth": {"enabled": True, "type": "dynamic", "roundness": 0.5}, |
| 81 | + "scaling": {"min": 1, "max": 8} |
| 82 | + }, |
| 83 | + "groups": { /* ... group definitions ... */ }, |
| 84 | + "interaction": { |
| 85 | + "navigationButtons": True, |
| 86 | + "keyboard": {"enabled": True} |
| 87 | + }, |
| 88 | + "physics": { |
| 89 | + "enabled": True, |
| 90 | + "solver": "barnesHut", |
| 91 | + "stabilization": {"enabled": True, "iterations": 1000, "fit": True} |
| 92 | + }, |
| 93 | + "configure": {"enabled": True, "showButton": False } |
| 94 | +} |
| 95 | +``` |
| 96 | +*Note: The configuration panel is enabled for this graph, allowing live tweaking of options.* |
0 commit comments