-1

So I am trying to implement a tool tip for my line chart using Mark's answer/example from here Multiseries line chart with mouseover tooltip

I'm able to get the tooltip line appear as I hover over my data points however I'm blocked by an error in I assume my x.invert function. 

Uncaught ReferenceError: x is not defined

I've checked to see if this is supported d3v4 and researched other examples but no luck.

in my Here is my full code in jsfiddle, thanks in advance.

https://jsfiddle.net/zos5jfzp/

Deep 3015
  • 9,929
  • 5
  • 30
  • 54
Daniel Tesfaye
  • 81
  • 1
  • 13

1 Answers1

1

There is some mistakes in your code:

Uncaught ReferenceError: x is not defined comes from you name your scale xScale and not x

You have the same problem for your y scale, rename it to yScale

You try to get all lines with a query selector on line but you didn't assign a class to lines.

vis.append('svg:path')
    .attr('class', 'graph-line')
    .attr('d', lineGen(d.values))
    .style("stroke", function() {
        return d.color = color(d.key);
    })
    .attr('stroke-width', 2)
    .attr("id", 'tag' + d.key.replace(/[^\w]|_/g, ''))
    .attr('fill', 'none');

And

var lines = document.getElementsByClassName('graph-line');

Finally, you have to change

idx = bisect(d.Count, xDate);

to

idx = bisect(d.values, xDate);

Here is the updated fiddle: https://jsfiddle.net/zos5jfzp/1/

JulCh
  • 2,710
  • 2
  • 19
  • 21