CODEWITHSUNDEEP
javascriptd3.js
Anton
Anton

Reputation: 473

How to add the data in the tooltip after the dataset switching

I have two datasets in my chart and I'm switching between them by clicking to the paragraphs (I'm drawing the buttons there later). The datasets have the different dimensions so I want to replace one another in the tooltip according to the chosen dataset. I can adjust the tooltip once

   .on("mouseover", function(d, i) {
    var tickDate = d3.select(d3.selectAll(".axis .tick text")[0][i]).data()[0];
    console.log (tickDate);
    var formatDate = RU.timeFormat("%B %Y");
    var tooltipDate = formatDate(tickDate);
    //Get this bar's x/y values, then augment for the tooltip
    var xPosition = parseFloat(d3. select(this). attr("x")) + ((barWidth - barPadding) / 2);
    var yPosition = parseFloat(d3. select(this). attr("y")) / 2 + h / 2;
    //Update the tooltip position and value
    d3.select("#tooltip" )
      .style("left" , xPosition + "px")
      .style("top" , yPosition + "px")
      .select("#value")
      .text(d + " DIMENSION1");
    d3.select("#tooltip" )
      .select("#label")
      .text(tooltipDate);
    //Show the tooltip
    d3.select("#tooltip" ).
      classed("hidden" , false);
    d3.select(this)
      .attr("fill", "orange");
  })

but I don't manage to refresh it after the switching. There is the text "DIMENSION1" in both cases now, my purpose is the text "DIMENSION2" appearance after switching and return "DIMENSION1" after the choosing of the initial dataset.

Here is my fiddle: https://jsfiddle.net/anton9ov/dw1xp1ux/

Upvotes: 2

Views: 41

Answers (1)

Tim B
Tim B

Reputation: 1983

Several problems here :

  • Avoid code duplication by creating a function transition(dataset, dimension) called for the transitions

  • You don't update the mouseover event when you change you dataset. So call your mouseover function each time you update the data

    svg.selectAll("rect").on("mouseover", function(d, i) {
           // Your mouseover function
        });

See this fiddle https://jsfiddle.net/bfz97hdw/ (I also fixed the color issue)

Upvotes: 1

Related Questions