Hi,
I am facing an error while creating a simple bar chart using d3
Error message: Namespace '"C:/Users/hasingh/node_modules/@types/d3/index"' has no exported member 'selection'
This is not getting fixed.
Please find my d3 code here:
module powerbi.extensibility.visual {
interface BarChartViewModel {
dataPoints: BarChartDataPoint[];
dataMax: number;
};
interface BarChartDataPoint {
value: number;
category: string;
};
export class Visual implements IVisual {
private svg: d3.Selection<d3.BaseType, any, HTMLElement, any>;
private host: IVisualHost;
private barGroup: d3.selection<SVGAElement>;
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.svg = d3.select<SVGElement, any>(options.element as any)
.append("svg")
.classed("my bar chart", true);
this.barGroup = this.svg.append("g")
.classed("bar-group", true);
}
public update(options: VisualUpdateOptions) {
let testData: BarChartDataPoint[] = [
{
value: 10,
category: 'a'
},
{
value: 20,
category: 'b'
},
{
value: 1,
category: 'c'
},
{
value: 100,
category: 'd'
},
{
value: 500,
category: 'e'
}];
let viewModel: BarChartViewModel = {
dataPoints: testData,
dataMax: d3.max(testData, x => x.value)
};
let width = options.viewport.width;
let height = options.viewport.height;
console.log(typeof (width));
this.svg.attr({
width: width,
height: height
});
let yScale = d3.scaleLinear()
.domain([0, viewModel.dataMax])
.range([height, 0]);
let xScale = d3.scaleOrdinal()
.domain(viewModel.dataPoints.map(d => d.category))
.rangeBands([0, width]);
let bars = this.barGroup
.selectAll(".bar")
.data(viewModel.dataPoints);
bars.attr({
width: xScale.rangeBand(),
height: d => height - yScale(d.value),
y: d => yScale(d.value),
x: d => xScale(d.category)
});
bars.exit().remove();
}
}
}
