Error: Custom Visual

[a_novice]

Hello!

When coding a custom barchart for powerbi I get an error with a d3 typing. I had errors with other d3 typings when following the microsoft instructional video on youtube, but I have figured out that those errors were due to the d3 update to v4 and I was able to fix those errors. However I am running into one error with the d3-selection typings and I am unable to find a solution

 I cannot find anyone who has the same error and to my best knowledge the update to d3 isn't what is causing it. The error message I am getting it: 'Generic type 'Selection<GElement, Datum, PElement, PDatum>' requires 4 type argument(s).' If I add the other 3 arguments that are required I get other errors in my code and from all the searching that I have done it doesn't look like anyone else has any other arguments.

code that I have:

private svg: d3.Selection<SVGElement>;

with additional arguments:

private svg: d3.Selection<SVGElement, any, any, any>;

or:

private svg: d3.Selection<SVGElement, null, null, null>;

Does anyone know if there is any fix to this error? I am new to typescript and javascript and whereas I am starting to understand the logic, I can't seem to find anyone with the same error or a solution to the error anywhere. I could add the 3 extra arguments and go through and try and fix the errors that will appear due to that, but it doesnt seem that anyone else who is creating these custom visuals has any additional arguments.

Thanks in advance!

[v-viig]

Hello @a_novice,

You might use this:

d3.Selection<SVGElement, any, any, any>;

What errors do you get if you apply this type?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[a_novice]

Hello @v-viig

I get errors everytime i reference the property when I apply:

d3.Selection<SVGElement, any, any, any>;

 

 the errors:

'Error' message: 'Type 'Selection<BaseType, {}, null, undefined>' is not assignable to type 'Selection<SVGElement, any, any, any>'.
Type 'BaseType' is not assignable to type 'SVGElement'.
Type 'Element' is not assignable to type 'SVGElement'.
Property 'onclick' is missing in type 'Element'.'

and:

'Error' message: 'Argument of type '{ width: [number, number]; height: (d: any) => number; y: (d: any) => number; x: (d: any) => numb...' is not assignable to parameter of type 'string'.'

[v-viig · Accepted solution]

I suppose that you might use these code:

private svg: d3.Selection<d3.BaseType, any, HTMLElement, any>;
private barChartContainer: d3.Selection<d3.BaseType, any, any, any>;
private barContainer: d3.Selection<d3.BaseType, any, any, any>;
private xAxis: d3.Selection<d3.BaseType, any, any, any>;

let svg = this.svg = d3.select<SVGElement, any>(options.element as any)

this.svg.attr({
    width: width,
    height: height
} as any);

bars.attr({
    width: xScale.rangeBand(),
    height: d => height - yScale(<number>d.value),
    y: d => yScale(<number>d.value),
    x: d => xScale(d.category),
    fill: d => d.color,
    'fill-opacity': viewModel.settings.generalView.opacity / 100
});

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[a_novice]

thank you @v-viig! this works great except for:

bars.attr({
    width: xScale.rangeBand(),
    height: d => height - yScale(<number>d.value),
    y: d => yScale(<number>d.value),
    x: d => xScale(d.category),
    fill: d => d.color,
    'fill-opacity': viewModel.settings.generalView.opacity / 100
});

since I'm using d3 v4 I cannot use .rangeBand doesn't work. I tried changing it to v4 format, but I am still getting the same error:

'Error' message: 'Argument of type '{ width: number; height: (d: any) => number; y: (d: any) => number; x: (d: any) => number; fill: ...' is not assignable to parameter of type 'string'.'

I am also having issues with the 'fill-opacity'. my code:

        public update(options: VisualUpdateOptions) {
            let width = options.viewport.width;
            let height = options.viewport.height;
            let margin = { top: 0, bottom: 25, let: 0, right: 0 };

            let viewModel: BarChartViewModel = this.vm =visualTransform(options, this.host)

            this.svg.attr({
                width: width,
                height: height
            } as any);

            if(viewModel.settings.enableAxis.show)
                height -= margin.bottom;

            let yScale = d3.scaleLinear()
                .domain([0, viewModel.dataMax])
                .range([height, 0]);

            let xScale = d3.scaleBand()
                .domain(viewModel.dataPoints.map(d => d.category))
                .rangeRound([0, width]);

            let xAxis = d3.axisBottom(xScale);

            this.xAxis.attr('transform', 'translate(0' + height + ')')
                .call(xAxis);

            let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);

            bars.enter()
                .append('rect')
                .classed('bar', true)

            bars.attr({
                width: xScale.bandwidth(),
                height: d => height - yScale(<number>d.value),
                y: d => yScale(<number>d.value),
                x: d => xScale(d.category),
                fill: d => d.color,
                'fill-opacity': viewModel.settings.generalView.opacity / 100

            });

            let selectionManager = this.selectionManager

            bars.on('click', function (d) {
                selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
                    bars.attr({
                        'fill-opacity': ids.length > 0 ? 0.5 : 1
                    });

                    d3.select(this).attr({
                        'fill-opacity': 1
                    });
                });

                (<Event>d3.event).stopPropagation();
            })

            bars.exit()
                .remove();
        }

[v-viig]

You should convert anonymous object to any:

bars.attr({
    width: xScale.bandwidth(),
    height: d => height - yScale(<number>d.value),
    y: d => yScale(<number>d.value),
    x: d => xScale(d.category),
    fill: d => d.color,
    'fill-opacity': viewModel.settings.generalView.opacity / 100
} as any);

The same for "fill-opacity":

bars.on('click', function (d) {
    selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
        bars.attr({
            'fill-opacity': ids.length > 0 ? 0.5 : 1
        } as any);

        d3.select(this).attr({
            'fill-opacity': 1
        } as any);
    });

    (<Event>d3.event).stopPropagation();
})

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[irish_1001]

Is there a working barchart sample with d3 v4? Thanks  

[v-viig]

We're considering converting custom visuals from d3 v3 to d3 v4 but we have no ETA at least for now.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com