cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
a_novice
Frequent Visitor

Error: Custom Visual

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 solutionpowerbierror.PNG

 

 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!

 

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

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

 

View solution in original post

7 REPLIES 7
v-viig
Community Champion
Community Champion

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
Frequent Visitor

Hello @v-viig

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

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

pbier2.PNG

 

 pbier3.PNG

 

 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
Community Champion
Community Champion

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

 

View solution in original post

a_novice
Frequent Visitor

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

Capture.PNG

 

 

v-viig
Community Champion
Community Champion

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

Is there a working barchart sample with d3 v4? Thanks  

v-viig
Community Champion
Community Champion

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

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Power BI October Update 2021.jpg

Power BI Release

Click here to read more about the October 2021 Release!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Teds Dev Camp Oct. 2021 768x460.jpg

Power BI Dev Camp - October 28th, 2021

Mark your calendars and join us for our next Power BI Dev Camp!

Top Solution Authors
Top Kudoed Authors