Forum Discussion

a_novice's avatar
a_novice
Frequent Visitor
9 years ago
Solved

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 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!

 

Need Help
  • v-viig's avatar
    v-viig
    9 years ago

    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

    [email protected]

     

7 Replies

  • v-viig's avatar
    v-viig
    Community Champion
    9 years ago

    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

    [email protected]

    • a_novice's avatar
      a_novice
      Frequent Visitor
      9 years ago

      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's avatar
        v-viig
        Community Champion
        9 years ago

        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

        [email protected]