¿Las imágenes personalizadas de PBI admiten mapas de mosaicos?

@v-viig Está funcionando, pero si incrusto el código en la opción.elemento con innerHTML.

Pero cuando intento hacerlo con el método update() no funciona.

@skizofre3e,

¿Puedes compartir el código que usas para incluir el folleto en el visual?

@v-viig

module powerbi.extensibility.visual {
    /**
     * Function that converts queried data into a view model that will be used by the visual
     *
     * @function
     * @param {VisualUpdateOptions} options - Contains references to the size of the container
     *                                        and the dataView which contains all the data
     *                                        the visual had queried.
     * @param {IVisualHost} host            - Contains references to the host which contains services
     */

    export class BarChart implements IVisual {
        private div: d3.Selection<SVGElement>;
        private host: IVisualHost;
        private barChartContainer: d3.Selection<SVGElement>;
        private barContainer: d3.Selection<SVGElement>;
        private bars: d3.Selection<SVGElement>;
        private target: HTMLElement;
        private g: d3.Selection<SVGAElement>;
        private object:any;
        private css: d3.Selection<SVGAElement>;
        private script: d3.Selection<SVGAElement>;



        static Config = {
            xScalePadding: 0.1,
        };

        /**
         * Creates instance of BarChart. This method is only called once.
         *
         * @constructor
         * @param {VisualConstructorOptions} options - Contains references to the element that will
         *                                             contain the visual and a reference to the host
         *                                             which contains services.
         */
        constructor(options: VisualConstructorOptions) {
            this.host = options.host;
            this.target = options.element;

/*
            this.script = d3.select(options.element)
            .append('script');
*/
/*
            this.css = d3.select(options.element)
            .append('link');
*/

/*
            this.div = d3.select(options.element)
            .append('div').attr("id","zakaria");
 */
let css = document.createElement("link");
css.rel = "stylesheet";
css.href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css";
this.target.appendChild(css);


 let mapDiv = document.createElement('div');
  mapDiv.id = 'zakaria';
  mapDiv.style.height = "100%";
  options.element.appendChild(mapDiv);


let js = document.createElement("script");
js.innerHTML= "var map = L.map('zakaria').setView([42.35,-71.08],13);";
this.target.appendChild(js);

js = document.createElement("script");
js.innerHTML= "L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);";
this.target.appendChild(js);


js = document.createElement("script");
js.src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js";
this.target.appendChild(js);
              
              
            
          

           
        }

        /**
         * Updates the state of the visual. Every sequential databinding and resize will call update.
         *
         * @function
         * @param {VisualUpdateOptions} options - Contains references to the size of the container
         *                                        and the dataView which contains all the data
         *                                        the visual had queried.
         */
        public update(options: VisualUpdateOptions) {
         //   let viewModel: BarChartViewModel = visualTransform(options, this.host);
            let width = options.viewport.width;
            let height = options.viewport.height;


       //    this.script.attr("src","https://unpkg.com/leaflet@1.0.3/dist/leaflet.js");

       //     this.css.attr({rel:"stylesheet",href: "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"});
       //    this.div.attr({width: width, height : height}); 





 }

        /**
         * Destroy runs when the visual is removed. Any cleanup that the visual needs to
         * do should be done here.
         *
         * @function
         */
        public destroy(): void {
            //Perform any cleanup tasks here
        }
    }
}

Pero como quiero hacer algunas manipulaciones, como definir polígonos y usar mi DataView, quiero acceder a las variables y métodos para tener flexibilidad en el código, lo cual no es el caso al agregar en innerHTML.

Supongo que puede acceder a Leaflet usando este código:

const L = window['L'] || window.window['L'];

Ignat Vilésov,

Ingeniero de software

Imágenes personalizadas de Microsoft Power BI

pbicvsupport@microsoft.com