Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
16 | |
2 | |
2 | |
1 | |
1 |