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

    Function bindD3Sankey

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

      Point selector at the ribbons — one <path> per link, the d3-sankey idiom being .data(graph.links).join('path') — rather than at the node rectangles. The nodes are derived from the links, so the links are what map one-to-one onto the payload; a selector matching the node rects would give the trace a node count where it expects a link count, and highlighting would be withdrawn.

      Parameters

      • svg: Element

        The SVG element containing the D3 sankey.

      • config: D3FlowConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      Timing — call after the layout has run. sankey(graph) replaces each link's source and target with the resolved node objects, and the binder reads names either way; what it cannot do is run before the ribbons are joined.

      • MaidrD3
      • useD3Adapter
      const graph = sankey({ nodes, links });
      svg.selectAll('path.ribbon').data(graph.links).join('path')…;

      bindD3Sankey(svgElement, {
        selector: 'path.ribbon',
        title: 'Energy flow',
        axes: { x: 'Node', y: 'Petajoules' },
      });

    Settings

    Member Visibility