Rounded Groups With a Header and a Footer

100%

Rounded Groups With a Header and a Footer

✓ Published0🌍 Public

Last edited Feb 8, 2020

Created on Jan 19, 2020

This example shows a tree diagram where nodes are grouped into containers, each with a header, a body, and a footer. The container’s header and footer use custom GoJS shapes, `RoundedTopRectangle` and `RoundedBottomRectangle`, from the `RoundedRectangles` extension, while the body holds child nodes via a `Placeholder`. Node templates similarly combine these shapes to display role-based coloring and optional loop indicators using `BpmnActivityLoop`. The diagram uses `go.TreeLayout` for automatic positioning, and links are drawn with orthogonal routing and triangular arrowheads. Data is provided as a static JSON-like array of nodes and groups.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree diagram with styling in v4

This example shows a hierarchical tree diagram with styled nodes and links, where circles represent data objects using radius, stroke, and fill colors mapped from the source data. The layout is generated with d3.tree, while d3.hierarchy assigns the parent-child relationships from the inline JSON tree structure. The SVG rendering includes curved link paths between nodes, and node circles use values for radius plus type and level fields for stroke and fill styling. Text labels are positioned by horizontal anchor direction, which changes for internal versus leaf nodes.

Dd3noob

68% match

Loading thumbnail…

Collapsible Vertical Tree with Boxes

A collapsible vertical fault tree displays hierarchical relationships with rounded boxes as nodes, each supporting expand/collapse via a TreeExpanderButton. Non-root nodes incorporate gate shapes (AndGate, OrGate, Circle, Triangle) that rotate vertically, with colors mapped by a nodeFillConverter function. The GoJS library renders the diagram using a TreeLayout with orthogonal links, while the model loads from embedded JSON via `go.Model.fromJson`. A Save button exports the current state to that JSON format.

RRafael Ortet

67% match

Loading thumbnail…

Tree diagram with styling in v5

This tree diagram shows hierarchical data with styled nodes and links. Node circles vary in radius based on a `value` field, while stroke and fill colors come from `type` and `level` properties. Links are curved paths with colors derived from the child’s `level`. The example uses d3.v5’s `d3.tree()` layout and `d3.hierarchy()` to structure the data, with SVG rendering for all elements. CSS classes style nodes and links, and text labels include leaf and internal node distinctions.

Dd3noob

66% match

Loading thumbnail…

Fork of Fault Tree

This example demonstrates a fault tree diagram built with GoJS, showing hierarchical relationships through nodes connected by orthogonal links. Each non-root node displays a gate shape—including AndGate, OrGate, Circle, or Triangle—with distinct color fills and an attached choice label. The diagram uses a TreeLayout with a vertical angle and implements drag-to-rearrange tree functionality. Code examples include node template bindings that dynamically set shape figures, fill colors, and rotation angles based on data properties, with undo/redo support enabled through the diagram’s UndoManager.

AAlex Velez

66% match

Loading thumbnail…

Tree diagram using flat data with v7

This example shows a tree diagram with five nodes arranged in a parent-child hierarchy, rendered as circles and labeled text connected by curved links in an SVG. The diagram is built from flat data—an array of objects with `name` and `parent` properties—which is converted into a nested hierarchy using `d3.stratify()`. The layout is computed with `d3.tree()` and `d3.hierarchy()`, while SVG paths and groups are appended manually. It uses D3.js version 7 and is adapted from the D3 Tips and Tricks book.

Dd3noob

66% match

Loading thumbnail…

Simple horizontal tree diagram using v7

This horizontal tree diagram shows a three-level hierarchy with a root node, two second-level nodes, and two leaf nodes, rendered as white circles with steel-blue outlines connected by curved gray links. Using d3.v7’s `d3.tree` layout and `d3.hierarchy` functions, the code positions nodes along the x-axis and assigns coordinates via the `treemap` call, then draws SVG paths for the links and SVG groups for the nodes, with labels placed to the left or right of each circle depending on whether the node has children. The data is hardcoded inline as a JSON object, and the diagram is built entirely with SVG elements appended to the page body using d3.select and `.append`.

Dd3noob

65% match

Loading thumbnail…

Simple horizontal tree diagram using v6

A simple horizontal tree diagram displays a small hierarchy of named nodes connected by curved links, with internal and leaf nodes distinguished by text alignment. Built with d3.js v6, it uses the `d3.tree()` layout and `d3.hierarchy()` to compute node positions from static, inline JSON data. SVG rendering places each node as a group containing a circle and label, while the links are drawn as cubic Bézier paths via the `d` attribute. The styling includes white node circles with steelblue strokes and gray links.

Dd3noob

64% match

Loading thumbnail…

Tree diagram with styling in v6

This example demonstrates a hierarchical tree diagram rendered with D3.js v6, using SVG to display nodes and curved links. The tree layout is generated via `d3.tree()` and `d3.hierarchy()`, with circle size varying according to each node’s `value` property. Node stroke and fill colors are dynamically mapped from the data’s `type` and `level` fields, while links are styled as cubic Bézier paths with per-node stroke colors. The code also applies CSS classes for internal versus leaf nodes and includes text labels with shadows for readability. The dataset is a static, nested JavaScript object representing a simple parent-child hierarchy.

Dd3noob

64% match