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

    Function bindD3WordCloud

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

      Point selector at the <text> elements — one per term. The default accessors are d3-cloud's own datum keys (text and size), since the plugin writes them onto every word it lays out; a cloud drawn from another shape names its keys through x / y as usual.

      The trace reads the terms heaviest first regardless of the order they are emitted in, and matches the glyphs to them by the same permutation — so the DOM order of the <text> elements (which for a cloud is packing order) does not have to mean anything.

      Parameters

      • svg: Element

        The SVG element containing the D3 word cloud.

      • config: D3WordCloudConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      Timing — call after D3 has rendered. With d3-cloud that means inside the layout's on('end', …) callback: the words are placed asynchronously, so a binder called straight after .start() sees an empty SVG and throws "No elements found for selector …".

      • MaidrD3
      • useD3Adapter
      cloud()
        .words(terms.map(t => ({ text: t.term, size: t.count })))
        .on('end', words => {
          svg.selectAll('text.term').data(words).join('text')…;
          bindD3WordCloud(svgElement, {
            selector: 'text.term',
            title: 'Terms in the Abstracts',
            axes: { x: 'Term', y: 'Occurrences' },
          });
        })
        .start();

    Settings

    Member Visibility