Question

I am trying to add tooltips to my D3 graph here:
http://jsfiddle.net/ericps/b5v4R/1/

but adding these mouseevents mess up how everything is rendered and I don’t know why. It is a line graph with axis

dots.enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", open_line.x())
    .attr("cy", open_line.y())
    .attr("r",3.5)
    .on("mouseover", myMouseOverFunction)
    .on("mouseout", myMouseOutFunction);

commenting out both .on methods at line 144 makes everything render how I expect it to

any insight into this?

The tooltips are based on this fiddle

http://jsfiddle.net/ericps/E4vrX/

Answer 1

You’re missing myMouseOverFunction.

Simply defining the function will render your graph correctly (with the axes), allowing you to properly define your MouseOver functionality.

var myMouseOverFunction = function() {}

You can see an updated response to your jsfiddle: http://jsfiddle.net/sahhhm/hQgbc/
This could be implemented differently, but just a quick change was to remove the .FILL definition in your CSS and instead populating that value when creating the dot itself.