migrating.md

d3.chart migration guide

From 0.2 to 0.3

• Change configuration from AMD- and CommonJS-enabled environments. d3.chart is now defined using the Universal Module Definition ("UMD") pattern, facilitating more natural consumption from projects that are structured according to the AMD or CommonJS module formats.
  • AMD projects should now define an entry to the "paths" configuration for "d3.chart" (a "shim" configuration is no longer necessary).
  • CommonJS projects may now include d3.chart directly via require('d3.chart').
  • No change is required in projects that include d3.chart via an HTML <script> tag.
• In all cases, this library will continue to define a new property on the object exposed by the d3 module.

From 0.1 to 0.2

• Update chart definitions:
  • Remove all but the first argument to the initialize method. (This may requiring refactoring the first argument to support multiple values via a generic "options" object.)
• Modify usage of the Chart#mixin method:
  • Change references to the Chart#mixin method to Chart#attach.
  • Instead of invoking with a Chart constructor name, a d3 selection, and options for the chart constructor, first instantiate a chart explicitly and invoke with a unique instance name and the new chart instance.

Example:

  d3.chart('ExampleChart', {
-   initialize: function(arg1, arg2) {
+   // If your Chart's `initialize` method has to be changed in this way, don't
+   // forget to also update the usage of the chart.
+   initialize: function(options) {

-     this.mixin('OtherChart', this.base.append('g'), {
-       exampleAttribute: 'value'
-     });
+     // Create the chart explicitly
+     var otherChart = this.base.append('g').chart('OtherChart', {
+       exampleAttribute: 'value'
+     });
+     // Use `Chart#attach` to activate the behavior previously controlled via
+     // `Chart#mixin`--the specified Chart's `draw` method will be
+     // automatically invoked when you call this chart's `draw` method.
+     this.attach('otherChart', otherChart);
    }
  });