Forum Discussion
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
Did you set rect size and fill? Otherwize, events might go though element.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
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
