Unable to import d3 library based on the select method

[vikassan]

To develop custom visuals to fetch Google Maps, what is the way to import d3 library based on the select method. In the below code, import d3 is not working and the corresponding d3.select function is not working for the d3 version 5. Any help to solve this issue will be grateful

source code:
import d3 from "d3";
d3.select(options.element)
.append('script')
.attr({
type: 'text/javascript',
src: 'https://maps.googleapis.com/maps/api/js?key=<<Google maps API Key>>',
async: true
})
.on('load', () => {
this.initMap();
});
this.target = options.element;

[dm-p]

Hi @vikassan,

From v4 and upwards, D3 uses ES6 modules and requires a different syntax to import.

Support for ES6 modules in Power BI custom visuals was added in powerbi-visuals-tools version 3.1.0 , so firstly you need to ensure that you're using this or a higher version. If not, you will need to upgrade your project (and possibly code) to match the changes.

Provided you have the corresponding @types/d3 installed in your project for the version of D3 you're using, one of the following will work:

Entire package:

import * as d3 from 'd3';
d3.select(...

Importing desired method only:

import { select } from 'd3';
select(...

Regards,

Daniel