Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
moises_martinez
Frequent Visitor

How add svg in my custom visual???

Hello!

 

 

I want to add a svg in my custom visual. In all example i saw:

 public init(options: VisualInitOptions): void {

         var svg = this.svg = d3.select(options.element.get(0)).append('svg').classed('thermometer', true);

          ....

}

 

but... I don't have init method in my class. I have

constructor(options: VisualConstructorOptions) {... }

Yhank you for any help.

1 ACCEPTED SOLUTION
moises_martinez
Frequent Visitor
4 REPLIES 4
Anonymous
Not applicable

I found this tutorial useful for adding an SVG to a custom visual: https://blog.jongallant.com/2016/12/powerbi-custom-visual-svg-png/

moises_martinez
Frequent Visitor

MawashiKid
Resolver II
Resolver II

Indeed the thermometer.ts you're refering to seems pretty much siimilar to an old deprecated version found on

 
  https://gist.github.com/spatney/4eb52930075a5e5be9af

and was basically used in an early DevTool Deprecated demo video.

 

I did manage to easily refactor the thermometer.ts code to Power BI Visuals CLI v1.1.0 a while ago.

 

Basically code was completely refactored, first by using constructor method instead of init.

Also for SoC convinience... everything that deals with dataRole, dataViewMappings, object...
definition was no longer defined in main thermometer.ts file using
    public static capabilities: VisualCapabilities
but in separate capabilities.json

D3.Selection definitions also had to be refactored with d3.selection<SVGElement> and so on... 

 

I'll see if I could put the demo back on Github...

TedPattison
Employee
Employee

The programming model for Power BI custom visuals changes over the summer in 2016. In the older model, there is an init method for each custom visuals. When the model changed, developers now write init code for one-time load operations in class constructor and there is no longer an init method for custom visuals in the new model.

 

The example you are looking at is based on the old model and you should be able to move that code from the old init method into the constructor.

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.