Quantcast
Channel: Developer topics
Viewing all articles
Browse latest Browse all 18114

Custom Visual Line Graph Not Rendering

$
0
0

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

Viewing all articles
Browse latest Browse all 18114

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>