Forum Discussion

sajal161292's avatar
sajal161292
Helper V
8 years ago

Error while developing a custom visual in power bi using d3

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

}


}