使用Power BI Custom Visual的其他情况更改矩形颜色

Question

I am new to Power BI Custom Visual and currently working on creating a simple Custom Visual. I actually want a rectangle whose color changes on the basis of a given measure. For Eg:

• If value<100 and value >0 then blue
• Else if Value>100 then green
• else red

i have used the following code but it is not working as the color of the rectangle is not changing with the value of the measure. Please let me know how this can be achieved

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"
            }
        })
    }
}

}

Answer 1

I know this is a very old question but for anyone coming here from Google, I thought I would answer it anyway.

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"
        }
    })

The first five lines are defining the height and width of the rectangle container, but that is also being defined further down.

Also, since the code is in the update function, the colour could simply be defined via a variable and then that variable used within the rect.attr function. Such as:

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

If there is a better way, then I am all ears and eager to learn.