d3: tooltips on multi series line chart at each line when mouse hover event

Question

I am drawing charts with d3 in my Angular 2 application. Now I have a multi series line chart so I am trying to add tool tips at each line when hover its\' vertical position

Answer 1

You can do this

d3.selectAll(".mouse-per-line")
      .attr("transform", (d, i, f) => {
        console.log(i);
        let beginning = 0,
          end = d3.select(lines[i]).node().getTotalLength(),
          target,
          pos;

        while (true) {
          target = Math.floor((beginning + end) / 2);
          pos = d3.select(lines[i]).node().getPointAtLength(target);
          if ((target === end || target === beginning) && pos.x !== mouse[0]) {
            break;
          }
          if (pos.x > mouse[0])      end = target;
          else if (pos.x < mouse[0]) beginning = target;
          else break; //position found
        }
        console.log(this.yScale.invert(pos.y).toFixed(2));

        // update the text with y value
        d3.select(f[i]).select('text') // **Error this.querySelector is not a function
          .text(this.yScale.invert(pos.y).toFixed(2));

        // return position
        return "translate(" + mouse[0] + "," + pos.y + ")";
      });

Answer 2

I have created tooltips on multi series line chart as per your requirement it's working good.

You need to make some changes into your code to set position of tooltips from bellow example links

See Example Here

Multi Series Line Chart with Tooltip