在 Power BI 中创建地图自定义视觉对象答案

【问题标题】：Creating Map Custom Visual in Power BI在 Power BI 中创建地图自定义视觉对象
【发布时间】：2018-12-11 01:47:36
【问题描述】：

我正处于创建 Power BI 自定义地图视觉对象的早期阶段。目前，我只是想显示一张空白的美国地图。我正在使用 GeoJSON 数据，我已将其添加到我的包中，如下所示：

将 JSON 保存到 JavaScript 文件中，并在其周围添加 var jsonData = {}。
将此 JavaScript 文件添加到我的 node_modules 文件夹的 geojson 子文件夹中
为我的清单添加了额外的 ExternalJS 引用 - "node_modules/geojson/us-states.js"

现在我开始构建视觉效果如下：

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")
        }
    }
}

视觉是空白的。控制台没有错误。我曾希望使用以下代码进行调试：https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/how-to-debug/，但那里提供的代码产生了许多错误，我相信根据该页面上的评论已被弃用。

谢谢！

【问题讨论】：

标签： javascript typescript d3.js powerbi

【解决方案1】：

您是否将数据添加到数据桶中？没有数据集 Power BI 不会调用视觉对象的更新方法。

尝试检查视觉对象的 DOM 树，以确保在执行视觉对象的更新方法后创建了 svg 元素或路径。

【讨论】：