CODEWITHSUNDEEP
typescriptd3.jspowerbi
Vlad
Vlad

Reputation: 73

power bi custom visuals use json file

I develop Power BI Custom visuals that contains custom map. This map is generate with topojson help. How I can use json file in my visual.ts file? Is it possible?

My code: 

let topojson = (<any>window).topojson;
let d3 = (<any>window).d3;
module powerbi.extensibility.visual {

    export class Visual implements IVisual {
        private target: HTMLElement;
        private updateCount: number;
        private settings: VisualSettings;
        private textNode: Text;

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            let width = window.innerWidth;
            let height = window.innerHeight;

            let svg = d3.select("body").append("svg").attr("width", width)
                .attr("height", height);

            d3.json("Regions.json", function (error, world) {
                if (error) {
                    // На случай, если карта не загрузилась 
                    console.log(error);
                    return;
                }


                svg.append("path")
                    .datum(topojson.feature(world, world.objects.RegionsMRSK))
                    .attr("d", d3.geoPath(d3.geoMercator()));
            });
        }

Upvotes: 0

Views: 1036

Answers (1)

Ilfat Galiev
Ilfat Galiev

Reputation: 93

To use JSON in the visuals code you need to fetch the JSON file from some web server over httpS if you use current version of tools (powerbi-visuals-tools 2.x.x).

or you can use the beta version of tools (powerbi-visuals-tools 3.x.x) and try to import JSON file:

import "Regions.json"

or of you familiar with webpack 4 you can use webpack config to consume JSON files:

https://github.com/Microsoft/powerbi-visuals-webpack-plugin#webpack-configuration - there is basic sample of config to build custom visual with webpack

Upvotes: 2

Related Questions