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

Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.

Reply
ekazaltzis
New Member

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

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

6 REPLIES 6
v-viig
Community Champion
Community Champion

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

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]; })
        }

    }    

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

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

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

Hello,

 

Was this issue ever resolved?

Helpful resources

Announcements
RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.

LearnSurvey

Fabric certifications survey

Certification feedback opportunity for the community.