时间戳

首页 > 解决方案 > power bi 自定义视觉效果使用 json 文件

typescript - power bi 自定义视觉效果使用 json 文件

问题描述

我开发了包含自定义地图的 Power BI 自定义视觉对象。此地图是在 topojson 帮助下生成的。如何在我的文件中使用 jsonvisual.ts文件？可能吗？

我的代码： 

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()));
            });
        }

标签： typescriptd3.jspowerbi

解决方案

要在视觉代码中使用 JSON，如果您使用当前版本的工具 (powerbi-visuals-tools 2.xx)，您需要通过 http S从某个 Web 服务器获取 JSON 文件。

或者您可以使用测试版工具（powerbi-visuals-tools 3.xx）并尝试导入 JSON 文件：

import "Regions.json"

或者您熟悉 webpack 4，您可以使用 webpack 配置来使用 JSON 文件：

https://github.com/Microsoft/powerbi-visuals-webpack-plugin#webpack-configuration - 有使用 webpack 构建自定义视觉的基本配置示例

推荐阅读