Necesita ayuda para obtener gráficos D3 en el mapa de folletos

Estoy creando una imagen personalizada que requiere que se muestre un gráfico de anillos sobre un mapa. Para empezar, estoy tratando de replicar esto.

http://bl.ocks.org/d3noob/9267535

Tiene círculos sobre un mapa de folletos. Tengo el mapa del folleto funcionando pero la parte D3 no funciona. Por favor, ayúdame con esto. Si obtengo los círculos en el mapa, luego puedo reemplazarlos con donas.

Visual.ts

module powerbi.extensibility.visual {
    
    
    export interface Data{
        lat: number;
        lng: number;
        latlng: {};
        status: string[];
        itemCnt: number[];
    }

    export class Visual implements IVisual {
        private target: HTMLElement;
        private divMap: HTMLElement;
        private divTable: HTMLElement;
        private map: L.Map;
        private basemap: L.TileLayer;
        private layer: L.TileLayer;

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            this.target = options.element;
            this.divMap = document.createElement("div");
            this.divMap.id = "map";
            this.divMap.style.height = "100%";   
            this.divMap.style.width = "100%";
            options.element.appendChild(this.divMap);

            var L = typeof L !== 'undefined' ? L : window['L'];
            
            this.map = L.map('map');
            this.map.setView([-41.28,174.77], 11); 
            var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            this.layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, });
            this.map.addLayer(this.layer);
        }


        public update(options: VisualUpdateOptions) {
            //update map size
            this.divMap.style.height = options.viewport.height.toString() + "px";
            this.divMap.style.width = options.viewport.width.toString() + "px";
            
            var svg = d3.select("#map").select("svg"),
            g = svg.append("g");
            
            var data: Data[] = [ 
                {lat:-41.28, lng:174.77, latlng:{}, status:['Under','Over','Normal'], itemCnt: [30,40,50]},
                {lat:-41.29, lng:174.76, latlng:{}, status:['Under','Over','Normal'], itemCnt: [30,30,60]},
                {lat:-41.23, lng:174.79, latlng:{}, status:['Under','Over','Normal'], itemCnt: [30,70,10]} 
            ];

            data.forEach(function(d) {
                d.latlng = new L.LatLng(<number>d.lat, <number>d.lng);
            })
            
            var circle= g.selectAll("circle")
                .data(data)
                .enter().append("circle")
                .style("stroke", "black")  
                .style("opacity", .6) 
                .style("fill", "red")
                .attr("r", 20)
                
            this.map.on("viewreset", update);
            update();

            function update() {
                circle.attr("transform", 
                function(d)  { 
                        return "translate("+ 
                        this.map.latLngToLayerPoint(new L.LatLng(d.lat, d.lng)).x +","+ 
                        this.map.latLngToLayerPoint(new L.LatLng(d.lat, d.lng)).y +")";
                        }
                )
            }
        }


    }
}

Visual.less

@import (less) "node_modules/leaflet/dist/leaflet.css";

Paquete.JSON

{
  "name": "visual",
  "version": "1.1",
  "dependencies": {
    "@types/d3": "^3.5.40",
    "d3": "^3.5.17",
    "geojson": "^0.5.0",
    "leaflet": "^1.3.1",
    "powerbi-visuals-utils-dataviewutils": "1.2.0"
  },
  "devDependencies": {
    "typescript": "^2.6.2"
  }
}

pbiviz.JSON

{
  "visual": {
    "name": "customMap",
    "displayName": "Custom Map",
    "guid": "custommap5A89ADFB5F694F71AB6D00C94383BB2B",
    "visualClassName": "Visual",
    "version": "1.0.0",
    "description": "",
    "supportUrl": "",
    "gitHubUrl": ""
  },
  "apiVersion": "1.10.0",
  "author": {
    "name": "",
    "email": ""
  },
  "assets": {
    "icon": "assets/icon.png"
  },
  "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/d3/d3.min.js",
    "node_modules/leaflet/dist/leaflet.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []
}

Respondimos con la versión fija de tu código.

¿Podría publicar el código fijo aquí si está de acuerdo con compartir?

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

Gracias, @ v-viig. Arreglas obras. Aquí están los visual.ts fijos.

module powerbi.extensibility.visual {


    export interface Data {
        lat: number;
        lng: number;
        latlng: {};
        status: string[];
        itemCnt: number[];
    }

    var L = typeof L !== 'undefined' ? L : window['L'];

    export class Visual implements IVisual {
        private target: HTMLElement;
        private divMap: HTMLElement;
        private divTable: HTMLElement;
        private map: L.Map;
        private basemap: L.TileLayer;
        private layer: L.TileLayer;

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            this.target = options.element;
            this.divMap = document.createElement("div");
            this.divMap.id = "map";
            this.divMap.style.height = "100%";
            this.divMap.style.width = "100%";
            options.element.appendChild(this.divMap);

            this.map = L.map('map');
            this.map.setView([-41.28, 174.77], 11);
            var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            this.layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, });
            this.map.addLayer(this.layer);

            L.svg().addTo(this.map);
        }


        public update(options: VisualUpdateOptions) {
            debugger;
            //update map size
            this.divMap.style.height = options.viewport.height.toString() + "px";
            this.divMap.style.width = options.viewport.width.toString() + "px";

            var svg = d3.select("#map").select("svg"),
                g = svg.append("g");

            var data: Data[] = [
                { lat: -41.28, lng: 174.77, latlng: {}, status: ['Under', 'Over', 'Normal'], itemCnt: [30, 40, 50] },
                { lat: -41.29, lng: 174.76, latlng: {}, status: ['Under', 'Over', 'Normal'], itemCnt: [30, 30, 60] },
                { lat: -41.23, lng: 174.79, latlng: {}, status: ['Under', 'Over', 'Normal'], itemCnt: [30, 70, 10] }
            ];

            data.forEach(function (d) {
                d.latlng = new L.LatLng(<number>d.lat, <number>d.lng);
            })

            var circle = g.selectAll("circle")
                .data(data)
                .enter().append("circle")
                .style("stroke", "black")
                .style("opacity", .6)
                .style("fill", "red")
                .attr("r", 20)

            const map = this.map;

            function update() {
                circle.attr("transform",
                    function (d) {
                        return "translate(" +
                            map.latLngToLayerPoint(d.latlng as any).x + "," +
                            map.latLngToLayerPoint(d.latlng as any).y + ")";
                    }
                )
            }

            this.map.on("viewreset", update);
            this.map.on("zoom", update);
            update();
        }


    }
}

¿Qué problema ha enfrentado exactamente? ¿Puede guardar el código fuente como un archivo zip?

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

Estoy tratando de crear círculos D3 en un mapa de folleto para una imagen personalizada. Puedo obtener el mapa, pero los círculos D3 no funcionan. Te he enviado mi código.

Respondimos con la versión fija de tu código.

¿Podría publicar el código fijo aquí si está de acuerdo con compartir?

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

Gracias, @ v-viig. Arreglas obras. Aquí están los visual.ts fijos.

module powerbi.extensibility.visual {


    export interface Data {
        lat: number;
        lng: number;
        latlng: {};
        status: string[];
        itemCnt: number[];
    }

    var L = typeof L !== 'undefined' ? L : window['L'];

    export class Visual implements IVisual {
        private target: HTMLElement;
        private divMap: HTMLElement;
        private divTable: HTMLElement;
        private map: L.Map;
        private basemap: L.TileLayer;
        private layer: L.TileLayer;

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            this.target = options.element;
            this.divMap = document.createElement("div");
            this.divMap.id = "map";
            this.divMap.style.height = "100%";
            this.divMap.style.width = "100%";
            options.element.appendChild(this.divMap);

            this.map = L.map('map');
            this.map.setView([-41.28, 174.77], 11);
            var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            this.layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, });
            this.map.addLayer(this.layer);

            L.svg().addTo(this.map);
        }


        public update(options: VisualUpdateOptions) {
            debugger;
            //update map size
            this.divMap.style.height = options.viewport.height.toString() + "px";
            this.divMap.style.width = options.viewport.width.toString() + "px";

            var svg = d3.select("#map").select("svg"),
                g = svg.append("g");

            var data: Data[] = [
                { lat: -41.28, lng: 174.77, latlng: {}, status: ['Under', 'Over', 'Normal'], itemCnt: [30, 40, 50] },
                { lat: -41.29, lng: 174.76, latlng: {}, status: ['Under', 'Over', 'Normal'], itemCnt: [30, 30, 60] },
                { lat: -41.23, lng: 174.79, latlng: {}, status: ['Under', 'Over', 'Normal'], itemCnt: [30, 70, 10] }
            ];

            data.forEach(function (d) {
                d.latlng = new L.LatLng(<number>d.lat, <number>d.lng);
            })

            var circle = g.selectAll("circle")
                .data(data)
                .enter().append("circle")
                .style("stroke", "black")
                .style("opacity", .6)
                .style("fill", "red")
                .attr("r", 20)

            const map = this.map;

            function update() {
                circle.attr("transform",
                    function (d) {
                        return "translate(" +
                            map.latLngToLayerPoint(d.latlng as any).x + "," +
                            map.latLngToLayerPoint(d.latlng as any).y + ")";
                    }
                )
            }

            this.map.on("viewreset", update);
            this.map.on("zoom", update);
            update();
        }


    }
}

Anónimo

@ v-viig hola, me encontré con esto y seguí los pasos que tomaron, pero recibí un error API versión 1.10.0 no válida. De todos modos, ¿idea de cómo solucionar esto, por favor?

Gracias

Pedzilla

¿Qué versión de pbiviz tienes ($ pbiviz –version)?

Puede intentar actualizar la versión de API ejecutando Actualización pbiviz 1.13.0 en el directorio donde se encuentra su visual.

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

Anónimo

Gracias @ v-viig. He hecho eso, pero aparece el error.

TYPESCRIPT Archivo ‘C: /viz/d3leaflet/src/Clients/Typedefs/d3/d3.d.ts’ no encontrado

error TYPESCRIPT Archivo ‘C: / viz / d3leaflet / src / Clients / Typedefs / jquery-visible /
jquery-visible.d.ts ‘no encontrado.
error TYPESCRIPT File ‘C: /viz/d3leaflet/src/Clients/Typedefs/jquery/jquery.d
.ts ‘no encontrado.
error TYPESCRIPT Archivo ‘C: / viz / d3leaflet / src / Clients / Typedefs / leaflet / leaflet
.d.ts ‘no encontrado.
error TYPESCRIPT /src/visual.ts: (18,22) No se puede encontrar el espacio de nombres ‘L’.
error TYPESCRIPT /src/visual.ts: (19,26) No se puede encontrar el espacio de nombres ‘L’.
error TYPESCRIPT /src/visual.ts: (20,24) No se puede encontrar el espacio de nombres ‘L’.

¿Qué he hecho mal por favor?
Muchas gracias

¿Puedes compartir el código fuente? ¿Generaste una imagen personalizada usando pbiviz nuevo ¿mando?

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

Anónimo

Hola @ v-viig

Gracias por responder…

Usé los códigos exactos que se muestran en este hilo en realidad.

Comencé con el nuevo comando pbiviz y luego usé su solución como se indica arriba.

Luego ejecute pbiviz start y obtenga el siguiente error Versión de API no válida

Luego intenté nuevamente con la actualización de pbiviz según su sugerencia y luego obtuve el error final Typecript, etc.

Muchas gracias, siento que no está muy lejos …

¿Puedes compartir el código fuente para depurarlo de nuestro lado?

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

Anónimo

tsconfig.json

{
  "compilerOptions": {
      "allowJs": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "ES5",
      "sourceMap": true,
      "out": "./.tmp/build/visual.js"
  },
  "files": [
      ".api/v1.10.0/PowerBI-visuals.d.ts",
      "src/Clients/Typedefs/d3/d3.d.ts",
      "src/Clients/Typedefs/jquery/jquery.d.ts",
      "src/Clients/Typedefs/jquery-visible/jquery-visible.d.ts",
      "src/Clients/Typedefs/leaflet/leaflet.d.ts",
      "src/visual.ts"
  ]
}

pbiviz.json

{
  "visual": {
    "name": "customMap",
    "displayName": "Custom Map",
    "guid": "custommap5A89ADFB5F694F71AB6D00C94383BB2B",
    "visualClassName": "Visual",
    "version": "1.0.0",
    "description": "",
    "supportUrl": "",
    "gitHubUrl": ""
  },
  "apiVersion": "1.10.0",
  "author": {
    "name": "",
    "email": ""
  },
  "assets": {
    "icon": "assets/icon.png"
  },
  "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/d3/d3.min.js",
    "node_modules/fix.js",
    "node_modules/leaflet/dist/leaflet.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []
}

package.json

{
  "name": "visual",
  "version": "1.1",
  "dependencies": {
    "@types/d3": "^3.5.41",
    "d3": "^3.5.17",
    "geojson": "^0.5.0",
    "leaflet": "^1.3.1",
    "powerbi-visuals-utils-dataviewutils": "1.2.0"
  },
  "devDependencies": {
    "typescript": "^2.6.2"
  }
}

visual.less

@import (less) "node_modules/leaflet/dist/leaflet.css";

Gracias @ v-viig

¿Tiene todos los archivos necesarios en src / Clientes / Typedefs / ?

Sería mejor si pudiera compartir el código fuente como un archivo zip.

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

Anónimo

https://github.com/nujcharee/PowerBI/blob/master/d3leaflet.zip

Hola, espero que esto sea lo que estás buscando? Muchas gracias espero que puedas ayudarme @ v-viig

Algunos archivos no existen. Por eso te enfrentas a los errores.

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

Anónimo

Todavía no funciona y tal vez no hice algo bien. Entiendo por el hilo que ha proporcionado la solución final a los otros usuarios. Me pregunto si esta imagen personalizada se puede compartir, por favor. Creo que lo intenté y fracasé al construirlo y si ya hay una solución y es de código abierto, estaré muy agradecido.

Muchas gracias

Pedzilla

Hola @Anónimo,

Debe hacer varias cosas para que el visual funcione correctamente. Si modifico las siguientes cosas, tengo el visual funcionando como http://bl.ocks.org/d3noob/9267535:

pbiviz.json

Quité el «node_modules / fix.js», referencia ya que estaba causando errores

tsconfig.json

Quitar todos los Clientes / Typedefs referencias ya que estos archivos no son necesarios durante el tiempo de ejecución

package.json – ‘Agradable tener’

Muevete «@ tipos / d3»: «^ 3.5.41», al devDependencies La parte como tipificación (Inteligencia) solo se necesita durante el desarrollo.

Último paso: abra un símbolo del sistema y navegue hasta el directorio base del objeto visual e ingrese npm install –save-dev @ types / leaflet para instalar los archivos de mecanografía para corregir los errores: No se puede encontrar el espacio de nombres ‘L’.

Anónimo

Hola

@jppp ¡Seguí eso y finalmente tuve una imagen! Muchas gracias por esto muy apreciado.

Sin embargo, espero una última pregunta: ¿cómo es que mi mapa está predeterminado en Nueva Zelanda? Debe haber algún lugar en los datos que no eliminé antes de ejecutar el comando del paquete pbiviz. Debe ser un error de novato, pero espero que puedas ayudar, por favor.

Gracias

Ped

Entradas relacionadas

Deja un comentario Cancelar respuesta