d3-svg-legend
    TypeScript icon, indicating that this package has built-in type declarations

    2.25.6 • Public • Published

    d3-legend

    Full documentation: http://d3-legend.susielu.com

    Looking for compatibility with d3 v3?

    • You can see the code for the d3 legend that works with d3 v3 in the v3 branch
    • Documentation for the v3 version of the legend

    d3-legend v4 updates (npm version 2.0.0 and higher)

    • Flattened naming for accessing functions
      • d3.legend.color => d3.legendColor
      • d3.legend.size => d3.legendSize
      • d3.legend.symbol => d3.legendSymbol
    • NPM package no longer binds to global d3, is now just an object with the three legend functions

    Usage

    Using just the minified file

    You must include the d3 library before including the legend file. Then you can simply add the compiled js file to your website:

    • d3-legend.min.js
    • d3-legend.js (Human readable version)

    Using CDN

    You can also add the latest version of d3-legend hosted on cdnjs.

    Using npm

    You can add the d3 legend as a node module by running:

    npm i d3-svg-legend -S

    To use the version compatible with d3v3 run: npm i d3-svg-legend@1.x -S

    Using the import syntax import legend from 'd3-svg-legend' gives access to the three legend types as an object. You can also import them independently for example import { legendColor } from 'd3-svg-legend'

    var svg = d3.select("#svg-color-quant");
    
    var quantize = d3.scaleQuantize()
        .domain([ 0, 0.15 ])
        .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
    
    svg.append("g")
      .attr("class", "legendQuant")
      .attr("transform", "translate(20,20)");
    
    var colorLegend = d3.legendColor()
        .labelFormat(d3.format(".2f"))
        .useClass(true)
        .scale(quantize);
    
    svg.select(".legendQuant")
      .call(colorLegend);
    
    

    Feedback

    I would love to hear from you about any additional features that would be useful, please say hi on twitter @DataToViz.

    Install

    npm i d3-svg-legend

    DownloadsWeekly Downloads

    16,567

    Version

    2.25.6

    License

    Apache-2.0

    Unpacked Size

    801 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar