Forum Discussion
Community ChampionHow to render d3 charts in Power BI currently
Hi smpa01,
As noted on the website, HTML Content doesn't support JavaScript. If you want to use D3 to its full potential, I'd suggest creating a custom visual. I have a blog post here (pt2) which may help with converting over existing code to a custom visual.
For your example, I notice you're only really using the DOM manipulation capabilities of D3 rather than things such as scaling, so you could do your example in HTML Content by writing a measure that creates the SVG elements and binds the data. Assuming your data is in a table called Test with the same columns as your example:
SVG Circles = VAR Circles = CONCATENATEX( 'Test', "<circle cy='60' cx='" & 'Test'[x] & "' r='" & 'Test'[r] & "'/>" ) RETURN "<svg width='350'>" & Circles & "</svg>"...which would result in the following output in the visual:
Alternatively, you can use Charticulator or Deneb to produce richer visual content without the overhead of writing a custom visual from scratch. Neither are D3, but they expose a reasonably broad grammar of graphics, which can be more convenient than coding. Deneb exposes the Vega and Vega-Lite languages (which can do a lot of common D3 use cases with much less code) and has the additional benefit of being certified.
Regards,
Daniel
Super UserHi smpa01,
As noted on the website, HTML Content doesn't support JavaScript. If you want to use D3 to its full potential, I'd suggest creating a custom visual. I have a blog post here (pt2) which may help with converting over existing code to a custom visual.
For your example, I notice you're only really using the DOM manipulation capabilities of D3 rather than things such as scaling, so you could do your example in HTML Content by writing a measure that creates the SVG elements and binds the data. Assuming your data is in a table called Test with the same columns as your example:
SVG Circles =
VAR Circles =
CONCATENATEX(
'Test',
"<circle cy='60' cx='" & 'Test'[x] & "' r='" & 'Test'[r]
& "'/>"
)
RETURN
"<svg width='350'>" & Circles & "</svg>"...which would result in the following output in the visual:
Alternatively, you can use Charticulator or Deneb to produce richer visual content without the overhead of writing a custom visual from scratch. Neither are D3, but they expose a reasonably broad grammar of graphics, which can be more convenient than coding. Deneb exposes the Vega and Vega-Lite languages (which can do a lot of common D3 use cases with much less code) and has the additional benefit of being certified.
Regards,
Daniel
smpa01dm-p thank you very much for your detailed response.
I created a minimally reproducible example to seek your help that could have been rendered with HTML content differently. But that would not always be possible and there is literally no way to avoid javascript/d3 for this kind of advanced visual.
Again, thanks for posting the link as to how to develop custom viz if I choose to convert all my D3 creation (a lot of them currently) to power bi custom viz (not my preferred route; it means creating n X d3 custom viz). I assumed initially that rendering in Power BI would not be an issue before creating them.
I do have one follow up Q for you - I am trying to understand why HTML Content does not have the javascript capability? Does building an app currently prevents a developer to add the js engine to its app? I am simply trying to understand why? Or should I be hopeful of a future where you can add that capability?
Looking forward to hearing from you.
- dm-p
Hi smpa01,
The HTML Content visual could potentially support JS but I don't feel that there would be an easy way to support features that can help creators with debugging code without a significant amount of work. The custom visual sandbox also has a lot of limitations so it would be very hard to identify, support and document all the known issues with JS.
As I develop my visuals in my free time and support them free of charge, this is something I don't have the bandwidth for so I will not be looking at adding this. You may be better approaching one of the other HTML visual vendors (Nova Silva or K-Team) to see if they have capacity to add support for JS in their versions.
You're of course welcome to fork HTML Content and add your own support for JS. You'd just need to change the visual GUID so that Power BI doesn't load my version from AppSource when you add your version to your reports.
Regards,
Daniel