使用带有D3 SVG符号的匿名函数时,"属性{}}上不存在"错误

Question

我正在尝试创建D3 SVG符号,其中符号形状根据数据中的类别属性动态设置.这将是PowerBI中自定义视觉的一部分,所以我使用的是Typings库.

从我在网上看到的例子中,下面的代码应该可行.

var milestoneSymbols = this.milestoneContainer.selectAll('.path').data(viewModel.milestones);
milestoneSymbols.enter().append('path');
milestoneSymbols.attr('d', d3.svg.symbol() 
                            .size(25) 
                            .type( function(d){ return d.typeSymbol})
    );
milestoneSymbols.attr("transform", function(d,i) {
        return "translate("+ xScale(d.date) + "," 
            + ((i % heightGroups) * (milestoneContainerHeight/heightGroups) + margins.top )
            + ")";
        });
milestoneSymbols.style("stroke", "function(d) {  return findTaskTypeShape(d.label).color; }
                .style("stroke-width", 1)
                .style("fill", function(d) {  return findTaskTypeShape(d.label).color; });

但是我得到Property 'typeSymbol' does not exist on type '{}'了代码的错误.type( function(d){ return d.typeSymbol}).它似乎d在内部不可用,type()因为它在d3.svg.symbol()代码中使用.如果我用一个字符串文字替换匿名函数,如"square",它的工作原理.

怎么解决这个问题？

Answer 1

Typescript对您的数据对象类型一无所知.您可以定义数据对象类型,也可以尝试使用any类型:

milestoneSymbols.attr('d', d3.svg.symbol() 
                            .size(25) 
                            .type( function(d: any){ return d.typeSymbol;})