为 power bi 开发自定义日历视图视觉

如何解决为 power bi 开发自定义日历视图视觉

我正在使用 typescript、d3js 和 node Calendarjs 库开发我的第一个 power bi 自定义视觉对象，该库基于 Microsoft 提供的示例，您可以使用 power-shell 下载。

我面临的问题是，使用以下一堆代码，我总是在 power bi 在线平台中得到一个空白图表，而且我什至没有得到我正在绘制的非常基本的预期图表：

"use strict";

var Calendar = require('calendarjs');

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T,any,any>;

import { VisualSettings } from "./settings";
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);
        this.target = options.element;
        this.updateCount = 0;
        if (document) {
            
            var table = d3.select('body').append('table')
                .attr("style","margin-left: 250px;"),thead = table.append("thead"),tbody = table.append("tbody");

            var cal = new Calendar(2021,0);
            var weeks = cal.monthDays();
            //var weeks = cal.weeks;
            weeks.forEach(function (week) {
                this.table
                .append('tr')
                .selectAll('td')
                .data(week)
                .enter()
                .append('td')
                .text(function (d) {
                    return d > 0 ? d : "";
                })
            });
        }


    
    }

    public update(options: VisualUpdateOptions) {
    
    }
}

注意：我知道有几个可以免费使用的日历视图图表，但最后我们希望拥有我们自己的日历视图，其中包含我们需要的自定义功能。

提前致谢。