MAIDR Documentation - v4.4.0
    Preparing search index...

    Function bindD3Treemap

    • Binds a D3.js treemap to MAIDR, generating the accessible data representation.

      Point selector at the node marks — one <rect> per leaf for the canonical d3.treemap()(root).leaves() join. Every matched element becomes one point, in DOM order, and nothing is filtered: the interior nodes and their totals are derived from the paths, so selecting the leaves alone is a complete tree, and selecting more than you drew would leave the reader navigating nodes that highlight nothing.

      Parameters

      • svg: Element

        The SVG element containing the D3 treemap.

      • config: D3TreemapConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      Timing — call after D3 has rendered. Like every D3 binder, this reads each matched element's D3-bound __data__; calling it before .data().join() has run (or before the SVG is mounted) throws "No elements found for selector …".

      • MaidrD3
      • useD3Adapter
      const root = d3.treemap().size([w, h])(
        d3.hierarchy(data).sum(d => d.population),
      );
      svg.selectAll('rect.leaf').data(root.leaves()).join('rect')…;

      bindD3Treemap(svgElement, {
        selector: 'rect.leaf',
        title: 'World population by region',
        axes: { x: 'Region', y: 'Population, millions' },
      });

    Settings

    Member Visibility