Forum Discussion

vikassan's avatar
vikassan
Regular Visitor
4 years ago

Unable to import d3 library based on the select method

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;

1 Reply

  • dm-p's avatar
    dm-p
    Super User
    4 years ago

    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