Custom Visual Line Graph Not Rendering

[ats1958]

The following code is compiling but isn't rendering anything. Any advice appreciated.

module powerbi.extensibility.visual {

    interface DataPoint {
            grade: number;
            minimum: number;
            maximum: number;
    };
    
    interface ViewModel {
        dataPoints: DataPoint[];
        maxValue: number;
        minValue: number;
        maxGrade: number;
    };
    
    export class Visual implements IVisual {
    
        private host: IVisualHost;
        private svg: d3.Selection<SVGElement>;
        private structureGroup: d3.Selection<SVGElement>;
        private yPadding: number = 0.1;
    
        

        constructor(options: VisualConstructorOptions) {
            this.host = options.host;
            d3.selectAll("svg").remove()
            this.svg = d3.select(options.element)
                .append("svg")
                .classed("vchart", true);
            this.structureGroup = this.svg.append("g")
                .classed("structure-group", true);
        }
    
        public update(options: VisualUpdateOptions) {
    
                let sample: DataPoint[] = [
                    {
                        grade: 1,
                        minimum: -0.2,
                        maximum: 0.2
                    },
                    {
                        grade: 2,
                        minimum: -0.25,
                        maximum: 0.25
                    },
                    {
                        grade: 3,
                        minimum: -0.3,
                        maximum: 0.3
                    },
                    {
                        grade: 4,
                        minimum: -0.35,
                        maximum: 0.35
                    },
                    {
                        grade: 5,
                        minimum: -0.35,
                        maximum: 0.35
                    },
                    {
                        grade: 6,
                        minimum: -0.4,
                        maximum: 0.4
                    },
                ];
    
                let viewModel: ViewModel = {
                    dataPoints: sample,
                    maxValue: d3.max(sample, x => x.maximum),
                    minValue: d3.min(sample, x => x.minimum),
                    maxGrade: d3.max(sample, x => x.grade)
                };
    
                
    
                let width = options.viewport.width;
                let height = options.viewport.height;
    
                this.svg.attr({
                    width: width,
                    height: height,
                });
    
                let xScale = d3.scale.linear()
                    .domain([viewModel.minValue, viewModel.maxValue])
                    .range([0, width]);
    
                let yScale = d3.scale.linear()
                    .domain([1, viewModel.maxGrade])
                    .range([0, height]);
    
                var valueline = d3.svg.line<DataPoint>()
                    .x(function (d) { return xScale(d.minimum); })
                    .y(function (d) { return yScale(d.grade); })
    
                let minline = this.structureGroup
                    .selectAll(".minline")
                    .data(viewModel.dataPoints)
    
                minline.append("path")
                    .attr("class","minline")
                    .attr("d",function(d){ return valueline(sample); })
    
                minline.exit()
                    .remove();
    
        }
    
    }
}

[v-viig]

Looks like you should change .attr("d",function(d){ return valueline(sample); }) to .attr("d",function(d){ return valueline(d); }).

Could you please check this solution out and let us know if that works well?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[ats1958]

After implementing, I am getting the following error:

Argument of type 'DataPoint' is not assignable to parameter of type 'DataPoint[]'.
Property 'length' is missing in type 'DataPoint'.

[v-viig]

It seems you should use this code instead to render a line properly as a single svg path element:

let minline = this.structureGroup
    .selectAll(".minline")
    .data([viewModel.dataPoints])

minline
    .enter()
    .append("path")
    .attr("class", "minline");

minline.attr("d", function (d) { return valueline(d); })

minline
    .exit()
    .remove();

Please let us know if that works for your case.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com