D3 5+ supports recent browsers, such as Chrome, Edge, Firefox and Safari. D3 4 and below also supports IE 9+. Parts of D3 may work in older browsers, as many D3 modules have minimal requirements. For example, d3-selection uses the Selectors API Level 1, but you can preload Sizzle for compatibility. You’ll need a modern browser to use SVG and CSS3 Transitions. D3 is not a compatibility layer, so if your browser doesn’t support standards, you’re out of luck. Sorry!
D3 also runs on Node and web workers. To use the DOM in Node, you must provide your own DOM implementation; JSDOM is recommended. To avoid defining a global document, pass a DOM element to d3.select or a NodeList to d3.selectAll, like so:
import {select} from "d3-selection";
import {JSDOM} from "jsdom";
const jsdom = new JSDOM(html);
const svg = select(jsdom.window.document.body).append("svg");
When using D3 in an environment that supports ES modules, you can import the default D3 bundle as a namespace :
import * as d3 from "d3";​
If you want to import a D3 module that is not included in the default bundle, you must assign it a separate namespace :
import * as d3 from "d3";
import * as d3GeoProjection from "d3-geo-projection";
For this reason, the preferred pattern is to import symbols from the D3 modules directly, rather than using the default bundle :
import {select, selectAll} from "d3-selection";
import {geoPath} from "d3-geo";
import {geoPatterson} from "d3-geo-projection";
import "d3-transition";
If you are using a bundler, make sure your bundler is configured to consume the modules entry point in the package.json.
