Public
Edited
Apr 19, 2023
Importers
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/tree
function Tree(
data,
{
// data is either tabular (array of objects) or hierarchy (nested objects)
path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes
id = Array.isArray(data) ? (d) => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string)
parentId = Array.isArray(data) ? (d) => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier
children, // if hierarchical data, given a d in data, returns its children
tree = d3.tree, // layout algorithm (typically d3.tree or d3.cluster)
sort, // how to sort nodes prior to layout (e.g., (a, b) => d3.descending(a.height, b.height))
label, // given a node d, returns the display name
title, // given a node d, returns its hover text
link, // given a node d, its link (if any)
linkTarget = "_blank", // the target attribute for links (if any)
width = 640, // outer width, in pixels
height, // outer height, in pixels
padding = 1, // horizontal padding for first and last column
fill = "#999", // fill for nodes
fillOpacity, // fill opacity for nodes
stroke = "#555", // stroke for links
strokeWidth = 1.5, // stroke width for links
strokeOpacity = 0.4, // stroke opacity for links
strokeLinejoin, // stroke line join for links
strokeLinecap, // stroke line cap for links
halo = "#fff", // color of label halo
haloWidth = 4, // padding around the labels
curve = d3.curveBumpX, // curve for the link
background = "#fff",
heightCoefficent = 1,
highlightWeeks = 0,
nodeRadius = 3,
nodeFontWeight = 400,
nodeFill = "#aaa",
nodeTextOffsetX = 4,
fontFamily = "Sans Serif",
fontSize = 10,
nodeTextColor = "black",
nodeFontStyle = "normal",
nodeTextDecoration = ""
} = {}
) {
function apply(func, data) {
return typeof func == "function" ? func(data) : func;
}
// If id and parentId options are specified, or the path option, use d3.stratify
// to convert tabular data to a hierarchy; otherwise we assume that the data is
// specified as an object {children} with nested objects (a.k.a. the “flare.json”
// format), and use d3.hierarchy.
const root =
path != null
? d3.stratify().path(path)(data)
: id != null || parentId != null
? d3.stratify().id(id).parentId(parentId)(data)
: d3.hierarchy(data, children);
// Sort the nodes.
if (sort != null) root.sort(sort);
// Compute labels and titles.
const descendants = root.descendants();
const L = label == null ? null : descendants.map((d) => label(d.data, d));
// Compute the layout.
const dx = 18 * heightCoefficent;
const dy = width / (root.height + padding);
tree().nodeSize([dx, dy])(root);
// Center the tree.
let x0 = Infinity;
let x1 = -x0;
root.each((d) => {
if (d.x > x1) x1 = d.x;
if (d.x < x0) x0 = d.x;
});
// Compute the default height.
if (height === undefined) height = x1 - x0 + dx * 2;
// Use the required curve
if (typeof curve !== "function") throw new Error(`Unsupported curve`);
const svg = d3
.create("svg")
.attr("viewBox", [(-dy * padding) / 2, x0 - dx, width, height + dx])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; height: intrinsic;")
.attr("font-family", fontFamily)
.attr("font-size", fontSize);
svg
.append("g")
.attr("fill", "none")
.attr("stroke", stroke)
.attr("stroke-opacity", strokeOpacity)
.attr("stroke-linecap", strokeLinecap)
.attr("stroke-linejoin", strokeLinejoin)
.attr("stroke-width", strokeWidth)
.selectAll("path")
.data(root.links())
.join("path")
.attr(
"d",
d3
.link(curve)
.x((d) => d.y)
.y((d) => d.x)
);
const node = svg
.append("g")
.selectAll("a")
.data(root.descendants())
.join("a")
.attr("xlink:href", link == null ? null : (d) => link(d.data, d))
.attr("target", link == null ? null : linkTarget)
.attr("transform", (d) => `translate(${d.y},${d.x})`);
node
.append("circle")
.attr("fill", (d) => apply(nodeFill, d.data))
.attr("r", (d) => apply(nodeRadius, d.data));
if (title != null) node.append("title").text((d) => title(d.data, d));
if (L)
node
.append("text")
.attr("dy", "0.32em")
.attr("x", (d) => apply(nodeTextOffsetX, d.data))
.attr("text-anchor", "start")
.attr("paint-order", "stroke")
.attr("stroke", halo)
.attr("stroke-width", haloWidth)
.attr("font-weight", (d) => apply(nodeFontWeight, d.data))
.attr("font-style", (d) => apply(nodeFontStyle, d.data))
.attr("fill", (d) => apply(nodeTextColor, d.data))
.attr("text-decoration", (d) => apply(nodeTextDecoration, d.data))
.text((d, i) => L[i]);
// svg
// .append("rect")
// .attr("width", width)
// .attr("height", height)
// .attr("fill", "#FFF");
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
