Error while developing a custom visual in power bi using d3

sajal161292 — Thu, 28 Jun 2018 10:29:37 GMT

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

}

Re: Error while developing a custom visual in power bi using d3

v-chuncz-msft — Sat, 30 Jun 2018 09:36:34 GMT

@sajal161292,

The word "Selection" needs to be capitalized.

topic Error while developing a custom visual in power bi using d3 in Developer

Error while developing a custom visual in power bi using d3

Re: Error while developing a custom visual in power bi using d3