I have a Power BI scatterchart visual that I would like to incorporate d3 zoom and pan functionality into. While I've come across several simple examples of using d3 for zoom and pan in HTML, none of them are tailored specifically for Power BI. I am struggling to adapt these examples into my Power BI typescript visual as I am unsure of where each component should be placed within the code. For instance, I'm uncertain about what should be included in the constructor section versus the update section.
Within my constructor, I have the following setup:
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.selectionManager = options.host.createSelectionManager();
this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, options.element);
let svg = this.svg = d3.select(options.element)
.append('svg')
.classed('scatterChart', true);
this.plotContainer = svg.append('g')
.classed('plotContainer', true);
this.xAxis = svg.append('g')
.classed('xAxis', true);
this.yAxis = svg.append('g')
.classed('yAxis', true);
}
I initially thought that I should connect the zoom feature either to this.svg or this.plotContainer. However, if that is the case, should this integration take place in the constructor or later in the code, possibly in the update section? I have predominantly attempted to implement it in the update area under the assumption that zoom would be activated by an event, which typically warrant handling in such a section.
Whenever I have attempted to incorporate various components of the examples into my code, aligning them where I believe they belong, the compiler consistently throws errors with the function:
function zoomed() {
this.plotContainer.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
The issue seems to revolve around d3.event.translate and d3.event.scale.
I find myself quite perplexed and would greatly appreciate your assistance!