Overview

D3.js is a great JavaScript library for various visualizations. It provides strong tools for creating any kind of visualization, be it a chart or a widget. MashZoneNG internally uses D3 for its charting library and widgets, e.g. Slider or Date Filter.

In MashZone version 10.2 and earlier D3 version 3.3.13 was used (this version will be referred to as D3V3). In MashZone version 10.3 the used D3 library was updated to version 5.0.0 (this version will be referred to as D3V5). As existing custom widgets might use the D3V3 library still, MashZone now supports both versions D3V3 and D3V5 in parallel.

Exposing the API

As the D3 library uses the global variable "window.d3" to make itself available for usage, both the versions are trying to assign themselves to "window.d3". In order to run both D3 versions in parallel, the following adjustments where done:

• The D3V3 library was not modified and still uses the global variable window.d3 to make itself available
• The D3V5 library is assigning itself to the global variable window.d3v5 instead of window.d3
• An API was exposed to fetch the required D3 version from the available D3 libraries

Using the API

MZNG.Viz.getD3Instance is now available in the custom widget framework and can be used as follows:

Recommendations

In case a custom widgets runs with D3V3, no code update is necessary.

In case a custom widgets is supposed to run with D3V5 please use d3 as a local variable to hold the latest D3V5 library. Example: d3.selectAll("rect") 

Notes