Forum Discussion

az2451's avatar
az2451
Resolver I
8 years ago
Solved

d3 v4 and selectionManager

I have updated my d3 library from v3 to v5 ([email protected])

 

Now im facing the consequences :)

 

I got everything working except for d3.selection

In the v3 this was the correct way to spell it:

private chartSelection: d3.selection.Update<ChartDataPoint>;
private svg: d3.Selection<SVGElement>;

But now since v4 it wants even more than that (by sudden, it wants 4 arguments!!)

 

Check it out:

 

Generic type 'Selection<GElement, Datum, PElement, PDatum>'

/* The first generic "GElement" refers to the type of the selected element(s). 
The second generic "Datum" refers to the type of the datum of a selected element(s). 
The third generic "PElement" refers to the type of the parent element(s) in the D3 selection. 
The fourth generic "PDatum" refers to the type of the datum of the parent element(s). 
A D3 Selection of elements. */

I dont get it how to use this masterpiece

 

Does anyone can help me here?

 

Need Help

4 Replies

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

    We'd recommned to ask developer of d3 or d3 types about this issue.

     

    Ignat Vilesov,

    Software Engineer

     

    Microsoft Power BI Custom Visuals

    [email protected]

    • az2451's avatar
      az2451
      Resolver I
      8 years ago

      Alright, i have found out how d3 selections work:

       

      private chartSelection: d3.Selection<d3.BaseType, ChartDataPoint, d3.BaseType, any>;
private svg: d3.Selection<SVGElement, {}, HTMLElement, any>;
private g: d3.Selection<SVGElement, {}, HTMLElement, any>;

      But the problem seems to be something else because the syncSelectionState(): void 

      dont work (no Errors are shown). That means i can not click on a specific datapoint.

       

      It also seems to be that by installing the newest version of d3 ([email protected] @types/[email protected]) it also installed a different version of typescript (there is are new typescript folder in my node_modules). So the syntax changed a bit.

       

      //For e.g. instead of 

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

//I now have to write it like this:

this.svg
   .attr('width', width)
   .attr('height', height);

       

       

      However, the selectionIds actually exist for each datapoint (I can for e.g. change the color of each datapoint over formatting options)

       

      this.datapoint.selectionId.getSelector()

      I cant understand why the selectionManager wont work, where it should be working now.

       

      Here is my whole code for download: MyGoogleDrive

       

       

      Is there someone who is also using d3 v4  and managed to get selectionManager working?

      I would be very thankful!

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

        It seems d3v4 handles selections in a different they in comparison to d3v3.

        We'd recommend to take a look at this fixed version.

         

        Ignat Vilesov,

        Software Engineer

         

        Microsoft Power BI Custom Visuals

        [email protected]