mouseover not working on g.append('rect')

[ekazaltzis]

Hi,

I developed a custom visualization started from the BarChart example. I would like to have my own tooltips so i I append a 'rect' with on('mouseover'). This is working great in standalone browser but when i package and deploy to PowerBI the onmouse is not triggered. I suppose there are some setttings to control this?

Please let me know if you need more info.

Regards,

Emanouil

[v-viig]

Did you set rect size and fill? Otherwize, events might go though element.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[ekazaltzis]

Hi, Yes according to me I did. Here is the source code for rendering the labels:

        private renderLabel(g, backColor, point, prop,x,y) {
                var div = d3.select("body").append("div")	
                .attr("class", "tooltip")				
                .style("opacity", 0);
        
                // create rectangles for text
                g.append("rect")
                .datum(point)
                .attr("height", 15)
                .attr("width", 25)
                .attr("fill", backColor)
//                .attr('opacity', '.3')
                .attr("transform", function(d){ return "translate("+ (x(<number>d.xAxis)-13) + "," +(y(<number>d[prop])-6)+")"})
                .on("mouseenter", (function(d){
                    div.transition()		
                    .duration(200)		
                    .style("opacity", .9);		
                    div.html("xAxis:"+ d.xAxis + "<br/>"  + "yAxis:" + d[prop])	
                    .style("left", x(d.xAxis) + "px")		
                    .style("top", y(d[prop]) + "px");	
                        
                }))                    
                .on("mouseout", (function(){
                    div.transition()		
                    .duration(500)		
                    .style("opacity", 0);	
                }));                    

                // Add text
                let text= g.append("text")
                .datum(point)
                .attr("x", function(d) { return x(<number>d.xAxis) - 10; })
                .attr("y", function(d) { return y(<number>d[prop]) - 5 })
                .attr("dy", ".70em")
//                .attr("text-anchor", "middle")  
                .style('fill', 'black')
                .text(function(d) { return <number>d[prop]; })
        }

    }    

[v-viig]

Code looks good to me. Have you tried to add console.log into event handlers to confirm it is (not) fired?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[ekazaltzis]

Hi  Ignat,

Thanks for taking the time to respond!

When i don't use PowerBi but just launch it in the browser without any powerbi plugins it works fine. However when wrapping into powerbi it doesn't work. I did previously have some console logs in the event handler and they showed fine in the browser. However  I don't know how to see the logs in powerBi Studio. So i deployed the custom visulatization to the online powerBi and there i don't see any console logs. So i think somtehing is catching the event because when i move over the graph the pointer changes to a hand. Is there a way to set event stopPropagation?

Regards,

Emanouil

[v-viig]

Interesting.

Can you share whole source code to investigate the issue from our end?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[somayaji]

Hello,

Was this issue ever resolved?