Merge pull request #38 from susielu/v4

V4

Gruntfile.js

@@ -5,11 +5,14 @@ module.exports = function(grunt){
 
 // configure plugins
 grunt.initConfig({
-
   browserify: {
     dist: {
       files: {
         'd3-legend.js': ['src/web.js'],
+      },
+      options: {
+        browserifyOptions: { debug: true },
+        transform: [ ['babelify', {'presets': ['es2015']}] ]
       }
     },
     docs: {

README.md

@@ -2,11 +2,21 @@
 
 Full documentation: [http://d3-legend.susielu.com](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](https://github.com/susielu/d3-legend/tree/v3)
+- [Documentation](http://d3-legend-v3.susielu.com) for the v3 version of the legend
+
+## d3-legend v4 updates
+- 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 inclue the [d3 library](http://d3js.org/) before including the legend file. Then you can simply add the compiled js file to your website:
 
 - d3-legend.min.js
@@ -18,32 +28,24 @@ You can also add latest version of [d3-legend hosted on cdnjs](https://cdnjs.com
 
 ### Using npm
 
-Already using d3? Great! You can add the d3 legend as a node module by running:
+You can add the d3 legend as a node module by running:
 
 `npm i d3-svg-legend -S`
 
-If not, install both this way:
+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'`
 
-`npm i d3@^3.0.0 d3-svg-legend -S`
-
-Please note, d3 is now a peer dependency, you will have to have the npm d3 module separately. This component works with any 3.x version of d3.
-
-If you `require('d3-svg-legend')` we attach to d3 as `d3.legend`. If you'd like to use d3-legend without extending d3, `require('d3-svg-legend/no-extend')`. For example:
 ```
-var d3 = require('d3')
-var legend = require('d3-svg-legend/no-extend')
-
 var svg = d3.select("#svg-color-quant");
 
-var quantize = d3.scale.quantize()
+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 = legend.color()
+var colorLegend = legendColor()
     .labelFormat(d3.format(".2f"))
     .useClass(true)
     .scale(quantize);