Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and a 50 percent discount on exams.
Get startedEarn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.
I'm in the early stages of creating a Power BI custom map visual. At the moment, I'm just trying to get a blank U.S. map to display. I'm using GeoJSON data, which I've added to my package as follows:
Now I'm starting to build the visual as follows:
module powerbi.extensibility.visual { "use strict"; export class Visual implements IVisual { private host: IVisualHost; private svg: d3.Selection<SVGElement>; private div: d3.Selection<SVGElement>; private container: d3.Selection<SVGElement>; private json = JSON.parse((<any>window).jsonData); constructor(options: VisualConstructorOptions) { this.svg = d3.select(options.element) .append('svg'); this.container = this.svg.append("g") .classed('container', true); } public update(options: VisualUpdateOptions) { let width: number = options.viewport.width; let height: number = options.viewport.height; // D3 Projection var projection = d3.geo.albersUsa() .translate([width/2, height/2]) // translate to center of screen .scale(1000); // scale things down so see entire US // Define path generator var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths .projection(projection); // tell path generator to use albersUsa projection //Create SVG element and append map to the SVG this.svg.attr({ width: width, height: height }); this.svg.selectAll("path") .data(this.json.features) .enter() .append("path") .attr("d", path) .style("stroke", "#fff") .style("stroke-width", "1") } } }
The visual is blank. No errors in console. I had hoped to debug using this: https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/how-to-debug/ , but the code provided there produced numerous errors and I believe has been deprecated based on a comment on that page.
Thanks!
We suggest to use "Pause on Caugh Exception" to understand what issue the code produces:
Sources
tabbreak on exceptions
icon (stop sign with a pause symbol)Pause On Caught Exceptions
checkbox
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
/* * Power BI Visual CLI * * Copyright (c) Microsoft Corporation * All rights reserved. * MIT License * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the ""Software""), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ module powerbi.extensibility.visual { "use strict"; export function logExceptions(): MethodDecorator { return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) : TypedPropertyDescriptor<any> { return { value: function () { try { return descriptor.value.apply(this, arguments); } catch (e) { console.error(e); throw e; } } } } } export class Visual implements IVisual { private host: IVisualHost; private svg: d3.Selection<SVGElement>; private div: d3.Selection<SVGElement>; private container: d3.Selection<SVGElement>; private json = JSON.parse((<any>window).jsonData); constructor(options: VisualConstructorOptions) { this.svg = d3.select(options.element) .append('svg'); this.container = this.svg.append("g") .classed('container', true); } @logExceptions() public update(options: VisualUpdateOptions) { let width: number = options.viewport.width; let height: number = options.viewport.height; console.log('Json:', this.json); debugger; // D3 Projection var projection = d3.geo.albersUsa() .translate([width/2, height/2]) // translate to center of screen .scale(1000); // scale things down so see entire US // Define path generator var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths .projection(projection); // tell path generator to use albersUsa projection //Create SVG element and append map to the SVG this.svg.attr({ width: width, height: height }); this.container.selectAll("path") .data(this.json.features) .enter() .append("path") .attr("d", path) .style("stroke", "#fff") .style("stroke-width", "1") } } }I added some debugging functionality above. If I set the developer tools to pause on every exception, it pauses hundreds of times before the page is even loaded. If I don't pause on every exception, the only thing appearing in the console is this:
Uncaught TypeError: Cannot read property 'dataview' of undefined at <anonymous>:67:73 at <anonymous>:94:15 at <anonymous>:95:11 at <anonymous>:96:7 at Window.<anonymous> (<anonymous>:97:3) at <anonymous>:217:20 at Object.i [as injectJsCode] (VM3514 visualhostcore.min.js:2) at r (VM3515 visualsandbox.min.js:1) at i.loadWithoutResourcePackage (VM3515 visualsandbox.min.js:1) at i.executeMessage (VM3515 visualsandbox.min.js:1)
Can you share the whole source code?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals