Norwegian Puffin Movies

    d3-annotate

    0.2.0 • Public • Published

    d3-annotate

    Interactively and programmatically add, edit, move and save SVG chart annotations

    Installing

    If you use NPM, npm install d3-annotate. Otherwise, download the latest release.

    API Reference (WIP)

    var annotation = d3.annoate()
      .container(svg.append('g')) // parent of annotation <text> elements
      .key((d) => d.id) // must be serializable, array index by default(a la d3.data)
      .text((d) => `${d.name}${d.score}`)
      .show((d) => d.score > 100); // can be true, false or fn
      .attr('dx', 10)
      .attr('text-anchor', 'start'); // .attr calls cary over to <text>
     
    // TODO
    annotation.editMode(true); // enable controls, true by default
     
    var bubbles = d3.selectAll('circle').data(teams);
    bubbles.enter().append('circle').....
     
    bubbles.call(annotation);

    Install

    npm i d3-annotate

    DownloadsWeekly Downloads

    9

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • cmpolis