How to import a d3 v4 / v5 module into a Node project but keep the D3 v3 namespace style (d3.)? [duplicate]

Question

I want to import the d3.selection es6 module into a project that is being bundled with rollup (including the common.js plugin).

So I do:

import {select, selectAll} from "d3-selection";

But now I have to write d3.. like it's some other language.

select('.classname').. etc..

I'd rather write

d3.select()

How can I keep that d3 namespace with prototype methods like select, min, max etc. That way it's all d3 dot whatever. d3.select etc..

Answer 1

Here's one way to do it:

import {select, selectAll} from 'd3-selection';
import {scaleOrdinal, scaleLinear} from 'd3-scale';
// etc.

const d3 = {select, selectAll, scaleOrdinal, scaleLinear}
//
const svg = d3.select('svg');

Answer 2

From the mdn docs you won't be able to place both in the same namespace, things you could do are

import * as d3 from "d3-selection";

Or since you are only importing select and selectAll

import {select as d3.select, selectAll as D3.selectAll} from "d3-selection";