在Power BI custom visual中使用d3.js库绘制线

我正在努力在Power BI自定义视觉中绘制一条单线。Power BI中的报告是使用TypeScript和d3.js v.3.0编写的。我可以用轴绘制图表，但线没有出现。在HTML文件中使用纯d3.js非常简单，但由于保留了打字，很难将其与TypeScript集成

在开发这段代码时，我在打字方面遇到了一些问题。下面的代码几乎可以工作。看看这个片段。当我在底部删除“any”时，打字的问题就出现了

模块powerbi.extensibility.visual{
导出类可视化实现IVisual{
私人目标：HTMLElement；
私有updateCount：编号；
私有svg:d3.选择；
私人主机：IVisualHost；
私人选择经理：ISelectionManager；
//私有xAxis:d3.选择；
//私人雅克斯：d3.选择；
私有数据=[
{日期：“2011-10-01”，截止日期：582.13}，
{日期：“2011-10-10”，截止日期：303.00}，
{日期：“2011-10-20”，截止日期：103.00}，
{日期：“2011-10-25”，截止日期：143.00}，
]
静态配置={
xScalePadding:0.1，
不透明度：1，
透明度：0.5，
XaxisFont乘数：0.04，
};
私人保证金={顶部：20，右侧：30，底部：30，左侧：80}；
构造函数（选项：VisualConstructorOptions）{
this.host=options.host；
让svg=this.svg=d3.select（options.element）
.append（'svg'）
.classed（“工作表”，正确）；
}
公共更新（选项：VisualUpdate选项）{
设width=options.viewport.width-this.margin.left-this.margin.right；
让高度=options.viewport.height-this.margin.top-this.margin.bottom；
this.svg.attr({
宽度：宽度+此.margin.left+此.margin.right，
高度：高度+此.margin.top+此.margin.bottom
});
让parseDate=d3.time.format（“%Y-%m-%d”）.parse；
设xScale=d3.time.scale（）
.domain（this.data.map（函数（d）{return parseDate（d.date）；}））
.范围（[0，宽度]）
设yScale=d3.scale.linear（）
.domain（[0，d3.max（this.data，函数（d）{return d.close；}）]）
.范围（[高度，0]）；
设xAxis=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.滴答声（10）
设yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）
.滴答声（10）
.innerTickSize（-宽度）
.outerTickSize（10）
.1（10）
让工作表=d3。选择（“.工作表”）
.attr（“宽度”，宽度+此.margin.left+此.margin.right）
.attr（“高度”，高度+此.margin.top+此.margin.bottom）；
//拆下现有轴和杆
this.svg.selectAll（'.axis'）.remove（）；
this.svg.selectAll（'.bar'）.remove（）；
this.svg.selectAll（'.chart'）.remove（）；
让图表=d3。选择（“.工作表”）
.附加（“g”）
.attr（“transform”、“translate”（“+this.margin.left+”，“+this.margin.top+”）
.attr（“类别”、“图表”）
图表.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
图表.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
让line=d3.svg.line（）
.x（函数（d）{console.log（parseDate（this.data.date））；返回xScale（parseDate（this.data.date））；}）
.y（函数（d）{返回yScale（this.data.close）；}）
.插入（“线性”）
图表.附加（“路径”）
.数据（此.数据）
.attr（“类”、“行”）
.attr（“d”，请将代码更改为

chart.append("path")
.datum(this.data)
.attr("class", "line")          
.attr("d", <any> line)

也从下面

let xScale = d3.time.scale()
.domain(this.data.map(function(d) { return parseDate(d.date); }))
.range([0, width])

到

我已经修改了代码并开始工作。请查找输出。
可以将其添加到代码笔中。如果有运行的代码链接，有人会更快地回答。代码笔允许键入脚本文件，并在运行时将其传输到JS。在代码笔处链接到沙盒：打开时没有显示任何内容。您是否在代码笔中运行了d3，并使用了一些基本功能，以排除简单的安装错误？请尝试否w、 起初我添加了代码，这很有效。然后我尝试清理它，但它不起作用时出现了一个小时间窗口。现在应该可以了。这是屏幕截图：对我来说仍然不起作用。（只是空白）
chart.append("path")
.datum(this.data)
.attr("class", "line") 
.attr("d", "M" + this.data.map((d)=> {
return xScale( parseDate(d.date)) + ',' + yScale(d.close);
}).join('L'))

let xScale = d3.time.scale()
.domain(this.data.map(function(d) { return parseDate(d.date); }))
.range([0, width])

let xScale = d3.time.scale() 
.domain(d3.extent(this.data,function(d) { return parseDate(d.date); }))
.range([0, width])