使用 if else 为 Power BI 自定义视觉对象更改矩形颜色答案

【问题标题】：Change rectangle color using if else for a Power BI Custom Visual使用 if else 为 Power BI 自定义视觉对象更改矩形颜色
【发布时间】：2018-05-17 19:58:23
【问题描述】：

我是 Power BI 自定义视觉对象的新手，目前正在创建一个简单的自定义视觉对象。我实际上想要一个矩形，它的颜色会根据给定的度量而变化。例如：

如果值0，则为蓝色
Else if Value>100 then green
其他红色

我使用了以下代码，但它不起作用，因为矩形的颜色不会随度量值而变化。请告诉我如何实现这一目标

module powerbi.extensibility.visual {

  interface RaggedViewModel{
    dataPoints: RaggedDataPoint[];
};

 interface RaggedDataPoint{
    value:number;
}
export class Visual implements IVisual {
    private svg:D3.Selection;
    private RecContainer:D3.Selection;

    constructor(options: VisualConstructorOptions) {
        this.svg=d3.select(options.element)
                   .append('svg')
                   .classed("circs",true);

       this.RecContainer = this.svg.append("g")
                            .classed("RecContainer",true);             
    }  

    public convertData(options: VisualUpdateOptions): RaggedViewModel
    {
        let dataViews =options.dataViews[0];
         let viewModel:RaggedViewModel;
         let categorical = dataViews.categorical;
         let category = categorical.categories[0];
         let dataValues = categorical.values[0];
         let objects = dataViews.metadata.objects;
         let cirDataPoint:RaggedDataPoint[]=[];

        for (let i = 0, len = Math.max(category.values.length, dataValues.values.length); i < len; i++) {
      cirDataPoint.push({
                value: dataValues.values[i],
        });

         return {
            dataPoints: cirDataPoint,
        };
         }
    }

    public update(options: VisualUpdateOptions) 
    {
   this.RecContainer.selectAll('rect').remove();
    let height =options.viewport.height;
    let width = options.viewport.width;

    this.svg.attr(
    {
        height:height,
        width:width
    });
    this.RecContainer.attr(
    {
        height:height,
        width:width
    });

    let rect=this.RecContainer.append('rect').classed('rectmain', true);  
        rect.attr({
            x:0,
            y:0,
            height:height,
            width:width,
            fill:function(d){
                if(d.value>100)
                    return "#B2EC69"
                else if(d.value<100 && d.value>0 )
                return "#69D2EC"
                else 
                return "#EC7769"
            }
        })
    }
}

}

【问题讨论】：

您对您的代码是否有具体问题，或者这是代码审查请求？
此代码不起作用，因为矩形的颜色没有改变。我想知道如何做到这一点。

标签： javascript node.js typescript d3.js powerbi

【解决方案1】：

我知道这是一个非常古老的问题，但对于任何从 Google 来到这里的人，我想我还是会回答它。

this.RecContainer.attr(
{
    height:height,
    width:width
});

let rect=this.RecContainer.append('rect').classed('rectmain', true);  
    rect.attr({
        x:0,
        y:0,
        height:height,
        width:width,
        fill:function(d){
            if(d.value>100)
                return "#B2EC69"
            else if(d.value<100 && d.value>0 )
            return "#69D2EC"
            else 
            return "#EC7769"
        }
    })

前五行定义了矩形容器的高度和宽度，但也向下定义了。

另外，由于代码在更新函数中，颜色可以简单地通过变量定义，然后在 rect.attr 函数中使用该变量。如：

let colour = "#EC7769";

if(d.value > 100)
    colour = "#B2EC69";
else if( (d.value < 100) && (d.value > 0) )
    colour = "#69D2EC";

let rect = this.RecContainer.append('rect').classed('rectmain', true);  
rect.attr({
    x: 0,
    y: 0,
    height: height,
    width: width,
    fill: colour
});

如果有更好的方法，那我就竖起耳朵，渴望学习。

【讨论】：