cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Regular Visitor

d3.js hover tooltips not rendering in Power BI

I have a scatterplot I've build using d3. I've gotten the tooltips to work just fine when testing in-browser, but when built the same d3 visualization in power bi, but I can't seem to get the tooltips to render when mousing over a point? Has anyone else had this issue, or has this been documented with power bi elsewhere? Thanks in advance. The example I built this off from is here:

https://www.d3-graph-gallery.com/graph/scatter_basic.html

 

var margin = {top: 10, right: 30, bottom: 30, left: 80},
width = pbi.width - margin.left - margin.right,
height = pbi.height - margin.top - margin.bottom;



// ALTER: Replaced the d3.tsv function with the pbi variant: pbi.dsv
pbi.dsv(function(letters) {

var svg = d3.select("#chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


// Add the tooltip container to the vis container
        // it's invisible and its position/contents are defined during mouseover
    var tooltip = d3.select("#chart").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);





var x = d3.scale.linear()
.domain([0, 4000])
.range([0, width]);

var y = d3.scale.linear()
.domain([0, 500000])
.range([height, 0]);




svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg.axis().scale(x).orient("bottom"));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

svg.append('g')
.selectAll("dot")
.data(letters)
.enter()
.append("circle")
  .attr("cx", function (d) { return x(d.grlivarea); } )
  .attr("cy", function (d) { return y(d.saleprice); } )
  .attr("r", 1.5)
  .style("fill", "#69b3a2")
.on("mouseover", function(data) {
            d3.select(this).attr("r", 5)
            d3.select(this).style("stroke", "000000")
            d3.select(this).style("stroke-width", "2px")
            d3.select('.tooltip')
            tooltip.transition()
                .duration(200)
                .style("opacity", .8);
            tooltip.html("tooltip!")
                
        })


.on("mouseout", function(data) {
                d3.select(this).attr("r", 1.5)
                d3.select(this).style("stroke", "000000")
                d3.select(this).style("stroke-width", "0px")
            
        })


});

 

  body {
    font: 10px sans-serif;
}



.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.tooltip {
    word-wrap: normal;
    position: absolute;
    text-align: center;
    min-height: 20px;
    min-width: 30px;                      
    padding: 2px;               
    font: 14px;      
    color: #fff;
    background-color: rgba(51,51,51,.85);
    border: solid thin black;

 }

    .tooltip.show {
    opacity: 0.9;
} 
0 REPLIES 0

Helpful resources

Announcements
November Update

Check it Out!

Click here to read more about the November 2020 Updates!

Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

secondImage

Power Platform October Community Highlights

Check out the top community contributors across all of the communities

secondImage

Create an end-to-end data and analytics solution

Learn how Power BI works with the latest Azure data and analytics innovations at the digital event with Microsoft CEO Satya Nadella.

Top Solution Authors