CODEWITHSUNDEEP
javascriptd3.jstooltipmouseover
lios
lios

Reputation: 148

Add tooltip to d3.js hierarchical bar chart

I am trying to add tooltip with mouseover hierarchical bars chart, as it is created by Mike Bostock here (https://bl.ocks.org/mbostock/1283663). I can't add tooltip by the traditional way, since the code is a bit different. Can anyone help me?

Upvotes: 0

Views: 528

Answers (1)

Robert Andersson
Robert Andersson

Reputation: 1521

You could do it like this:

  bar.append("text")
      .attr("class", "moreText")
      .attr("x", function(d) { return x(d.value) + 20; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .attr("fill", "none")
      .text(function(d) { return d.value; })

in the bar function and add this to have the hover effect

  bar.on("mouseover", function() {
        d3.select(this).select(".moreText").attr("fill", "#333")
          .attr("x", function(d) { return x(d.value) + 15; })
      })
      .on("mouseout", function() {
        d3.select(this).select(".moreText").attr("fill", "none")
      })

in the same function, adding the .attr("x", function(d) { return x(d.value) + 15; }) here to make sure we get the right coordinate for the right rectangle both before and after transitions as well and referencing the text by class like this: 

d3.select(this).select(".moreText")

Here's a working plunker

Upvotes: 2

Related Questions