Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.
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(); } } }
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
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'.
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
User | Count |
---|---|
16 | |
5 | |
2 | |
1 | |
1 |
User | Count |
---|---|
22 | |
3 | |
3 | |
2 | |
2 |