d3.js tooltips on path

Question

a lot of what I've read regarding d3.js and tooltips makes reference to having individual points on a graph.

instead, my graph graph is using one long path to render. I was wondering how I would apply mouseover methods to such a path, where I would then tie a tooltip div accordingly

http://jsfiddle.net/ericps/xJ3Ke/6/

svg.append("path")
.attr("class", "area")
.attr("clip-path", "url(#clip)")
.style("fill", "url(#gradient)");

Answer 1

You can set a layer of invisible objects representing each point you'd like to have a tooltip for, and add mouse interactions to those objects.

I've updated your jsfiddle with the following -

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("r", 5)
    .style("fill","none")
    .style("stroke","none")
    .style("pointer-events","all")
  .append("title")
    .text(function(d) { return "Date: " + formatDate2(d.date) + " Value: " + d.value; });

This adds a circle element to each data point, and a title element to each of those circles. Note that the "pointer-events","all" allows the mouse interactions even though the elements are invisible

full jsfiddle here: http://jsfiddle.net/xJ3Ke/9/