Custom edge example for mxGraph

100%

Custom edge example for mxGraph

✓ Published0🌍 Public

Last edited Dec 2, 2013

Created on Jan 17, 2024

This example demonstrates custom edge rendering in mxGraph by defining a new `LinkShape` class that extends `mxArrow` and overrides its `paintEdgeShape` method to draw a custom arrow-like path. The graph contains three edges with different arrow styles, including dashed, oval, and block arrows, plus a custom link shape. The code uses `mxCellRenderer.prototype.defaultShapes` to register the custom shape, and styles are applied via `getStylesheet()` to set colors, fonts, and spacing. Vertices and edges are inserted programmatically using `graph.insertVertex` and `graph.insertEdge`, with relative label positioning and offset geometry.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a directed graph rendered as SVG using the dagreD3 library, with nodes labeled A through E and styled edges that vary in color, thickness, dash pattern, and arrowhead appearance. The graph layout is computed by dagreD3’s renderer, which is invoked with a `Graph` object built via the `graphlib` API. Node and edge styles are applied through inline attributes such as `style` and `labelStyle`, while custom CSS classes like `arrowhead` override default arrow colors. The final SVG is centered horizontally within a fixed-height container using D3’s `select` and `attr` methods, with the graph’s dimensions dictating the canvas height.

MMing LIU

61% match

Loading thumbnail…

Force Layout with multiple labelled edges between nodes

This example shows a force-directed graph with multiple labeled edges between nodes, where each edge carries a distinct text label. The visualization uses D3 v3’s `d3.layout.force` to position three nodes, while custom functions `countSiblingLinks` and `getSiblingLinks` detect parallel links between the same source and target. The `arcPath` function draws curved paths for each sibling edge, and invisible paths with text elements display the labels along the curves. Data comes from a hardcoded set of edges containing lyrical phrases.

FFrissAnalytics

58% match

Loading thumbnail…

Force Layout with labels on edges

This example shows a force-directed graph where nodes are labeled and every edge carries a text label that follows the link’s path, with arrowheads marking direction. The visualization relies on d3.v3’s `d3.layout.force` to position nodes and update links on each tick. Edge labels are rendered by appending `<textPath>` elements to hidden `<path>` elements, which reference the edge’s ID, allowing the label to orient automatically along the line. Node positions, edge coordinates, and label locations are all updated in the force’s tick handler, and data is pulled from a hardcoded JavaScript array.

FFrissAnalytics

57% match

Loading thumbnail…

Edge labeling

This example demonstrates edge labeling in a network visualization built with D3 v6, showing nodes connected by curved vertical paths with labels that orient along link direction. The code defines a network of server and device nodes with fixed coordinates, rendered as SVG elements using custom icon glyphs from Font Awesome. Links are drawn with `d3.linkVertical()` paths and labeled dynamically based on connection type, with forces applied via `forceStrength` and `linkStrength` constants to adjust layout. The visualization includes tooltips on hover and highlights forward versus reverse traffic flow between nodes.

FFereidoun Mianji

57% match

Loading thumbnail…

Gist b3b904582eaa49475bc90dacbb6d92c9

This example demonstrates how to construct and arrange basic geometric shapes within a Sketch document using the `sketch` JavaScript API. The code programmatically creates an artboard and populates it with a square, a triangle, a hexagon, and a circle, each styled with distinct fill colors or a bordered outline. The `ShapePath` class and its `ShapeType` enumerations are the core components, with coordinates and dimensions set through `frame` objects. The rendering approach is code-driven, defining visual elements directly without external data sources, showcasing the library’s programmatic drawing capabilities.

KKevinGutowski

57% match

Loading thumbnail…

Graph Demo 2

This example demonstrates the HPCC Platform Graph Widget’s ability to use any widget as a graph vertex, showing diverse node types like shapes, text boxes, icons, menus, and even an embedded column chart. The graph supports multiple layouts (Hierarchy, Force Directed, Spring, Circle) and scaling options via dropdown menus. Built with the HPCC viz library, it uses the `Graph`, `Vertex`, and `Edge` APIs, along with common widgets like `FAChar` and `ResizeSurface`, to assemble a connected network of interactive elements.

GGordonSmith

56% match

Loading thumbnail…

Making cool lines in Sketch

A generative drawing built with the Sketch JavaScript API draws a symmetric, web-like pattern of red lines on a black artboard. The example shows how four nested loops create a series of straight ShapePath segments, each with semi-transparent red borders, that collectively form a repeating geometric motif. It demonstrates programmatic layer creation, setting frame and style properties, and using the `adjustToFit` method to size the group. The code uses `sketch.getSelectedDocument`, `Artboard`, `Group`, and `ShapePath` to generate the composition directly within Sketch's document model.

KKevinGutowski

55% match

Loading thumbnail…

Gist 9423b215bf16f484a18146a11dcb7d2b

This visualization uses d3.layout.narrative to compute a narrative chart layout from scene-based character co-occurrence data, then renders the result as an interactive mxGraph diagram. It shows character appearances as small circles grouped into rectangular scene clusters, with curved edges linking appearances of the same character across scenes and introduction labels placed to the left. The underlying data wrangling preprocesses raw scene and character JSON into a format for the narrative layout, while mxGraph handles the final drawing. The code also enables curved, arrowless edges and disables user interaction with the graph.

HHugoberry

55% match