0

I found this is a very helpful example to create tooltip on line charts. I am following this to work on a line chart now. The difference is the tooltip in my chart has a box/background to contain the value showing in the tooltip, so I add append('rect') with attr('fill', 'white').

mousePerLine.append('rect').
   attr('width', '38px').
   attr('height', '20px').
   attr('class', 'tooltipRect').
   style('fill', 'white').
   attr('transform', 'translate(5,-13)');

To avoid overlapping of text as well as rect, I changed line 292 according to a post here How to select multiple selectors with selectAll?

  .select("text")

    .attr("transform", function(d,i) {
        return "translate (10,"+(3+ypos[i].off)+")";
    })

to

  .selectAll(".tooltipRect, text")

    .attr("transform", function(d,i) {
        return "translate (10,"+(3+ypos[i].off)+")";
    })

Here's a fiddle of the problem.

However, the tooltips are still overlapping. Can anyone help to figure out what is the cause of the problem? Thanks in advance!

Community
  • 1
  • 1
user6073145
  • 13
  • 3

1 Answers1

0

The rects keep overlapping likely because the way you are selecting them.
Why not close the selectiona at the text (keep the text selection above as is) but a make a new selection for the rect:

d3.selectAll(".mouse-per-line")
    .select("rect")
    .attr("transform", function(d,i) {
        return "translate (5,"+(ypos[i].off - 13)+")";
     });

This works for me. I did the translation based on your initial set up of the rect. I adjusted the offset on line 286 from 15 to 20 - it looks a bit better.

rby
  • 754
  • 6
  • 10
  • Thanks! But the text is overlapping now. My problem is how do I select both rect and text. – user6073145 Mar 22 '16 at 20:24
  • It shouldn't be. Make sure you have not removed the text selection (lines 292 - 296). Close that and add the code I posted as a new selection for the rects. Also, increase the displacement amount you are using on line 286, which is 15, to say 20 or 25 even. – rby Mar 22 '16 at 20:47