Custom Visual rendering issus

[sesamelogix]

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

    }

}