topic Re: mouseover not working on g.append('rect') in Developer

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

ekazaltzis — Fri, 14 Sep 2018 16:14:52 GMT

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

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

v-viig — Mon, 17 Sep 2018 13:09:06 GMT

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

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

ekazaltzis — Wed, 19 Sep 2018 20:27:08 GMT

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

    }

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

v-viig — Thu, 20 Sep 2018 07:14:54 GMT

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

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

ekazaltzis — Thu, 20 Sep 2018 16:59:08 GMT

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

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

v-viig — Fri, 21 Sep 2018 07:18:23 GMT

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

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

somayaji — Tue, 09 Jul 2019 19:17:39 GMT

Hello,

Was this issue ever resolved?