Custom Visual rendering issus

sesamelogix — Sat, 30 Sep 2023 02:08:52 GMT

i am trying to build a power bi custom visual. based on Tutorial: Develop a Power BI circle card visual. it works fine in edit mode but once i saved the repost and open it in reading view. visual not displayed..atlease not at firsl unless i interact with other visual. i tried to figure it out and only thing which seems to make it work is by calling "this.host.refreshHostData();" in constructor to force the custom viusal to triger update method. Can anyone please let me know what i am doing wrong here.. thanks..

export class Visual implements IVisual {

private host: IVisualHost;

private svg: Selection<SVGElement>;

private container: Selection<SVGElement>;

private circle: Selection<SVGElement>;

private textValue: Selection<SVGElement>;

private textLabel: Selection<SVGElement>;

constructor(options: VisualConstructorOptions) {

this.svg = d3.select(options.element)

.append('svg')

.classed('circleCard', true);

this.container = this.svg.append("g")

.classed('container', true);

this.circle = this.container.append("circle")

.classed('circle', true);

this.textValue = this.container.append("text")

.classed("textValue", true);

this.textLabel = this.container.append("text")

.classed("textLabel", true);

}

public update(options: VisualUpdateOptions) {

let dataView: DataView = options.dataViews[0];

let width: number = options.viewport.width;

let height: number = options.viewport.height;

this.svg.attr("width", width);

this.svg.attr("height", height);

let radius: number = Math.min(width, height) / 2.2;

this.circle

.style("fill", "white")

.style("fill-opacity", 0.5)

.style("stroke", "black")

.style("stroke-width", 2)

.attr("r", radius)

.attr("cx", width / 2)

.attr("cy", height / 2);

let fontSizeValue: number = Math.min(width, height) / 5;

this.textValue

.text(<string>dataView.single.value)

.attr("x", "50%")

.attr("y", "50%")

.attr("dy", "0.35em")

.attr("text-anchor", "middle")

.style("font-size", fontSizeValue + "px");

let fontSizeLabel: number = fontSizeValue / 4;

this.textLabel

.text(dataView.metadata.columns[0].displayName)

.attr("x", "50%")

.attr("y", height / 2)

.attr("dy", fontSizeValue / 1.2)

.attr("text-anchor", "middle")

.style("font-size", fontSizeLabel + "px");

}

topic Custom Visual rendering issus in Custom Visuals Development Discussion

Custom Visual rendering issus