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.
I'm trying to create a custom visual which has a line graph. I'm trying to create the below D3 line graph but getting type errors.
https://bl.ocks.org/emmasaunders/f55caf3a742aac10a5d44f58374bf343
Here is my code:
var data: LineData[] = this.dataForLineGraph(options); //A function which gets data for line chart var max = 0; var minDate = new Date(); var maxDate = new Date(); max = d3.max(data, function(d) { return d.m1; }); minDate = d3.min(data, function(d) {return d.date; }); maxDate = d3.max(data, function(d) { return d.date; }); var margin = {top: 20, right: 40, bottom: 30, left: 30}, width = options.viewport.width - margin.left - margin.right, height = options.viewport.height - margin.top - margin.bottom - 50; d3.selectAll('svg').remove(); var svg = d3.select('.linediv').append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + (margin.left) + "," + margin.top + ")"); var y = d3.scale.linear() .domain([0,max]) .range([height,0]); var x = d3.time.scale() .domain([minDate,maxDate]) .range([0,width]); var yAxis = d3.svg.axis() .orient("left") .scale(y); var xAxis = d3.svg.axis() .orient("bottom") .scale(x); svg.append("g") .attr("class","axis x") .attr("transform","translate(0,"+height+")") .call(xAxis); svg.append("g") .attr("class","axis y") .call(yAxis); var line = d3.svg.line() .x(function(d){ return x(d.date); })//error .y(function(d){ return y(d.m1); })//error .interpolate("cardinal"); svg.append("path") .attr("class","line") .attr("d",function(d){ return line(data); }) //error
The error says:
Type LineData[] is not assignable to type [number.number].
Property 0 is missing in the type LineData[]
LineData is an interface and it looks like below.
export interface LineData{ item: string; date: Date; m1: number; m2: number; m3: number; m4: number; m5: number; m6: number; }
Solved! Go to Solution.
To fix the issue you faced you should cast d3.svg.line to LineData by using this code:
var line = d3.svg.line<LineData>()
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
To fix the issue you faced you should cast d3.svg.line to LineData by using this code:
var line = d3.svg.line<LineData>()
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
It works perfectly now. Thanks.
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 |
---|---|
12 | |
2 | |
1 | |
1 | |
1 |