Creating a click handler

Let's say that we want it so that when the user clicks on the <svg> element, it creates a new run. Add the following to the bottom of app.js:

d3.select('svg').on('click', function(){    //gets the x position of the mouse relative to the svg element
    var x = d3.event.offsetX;    //gets the y position of the mouse relative to the svg element
    var y = d3.event.offsetY; 
    //get a date value from the visual point that we clicked on
    var date = xScale.invert(x);    //get a numeric distance value from    //the visual point that we clicked on
    var distance = yScale.invert(y); 
    //create a new "run" object
    var newRun = {         //generate a new id by adding 1 to the last run's id
        id: runs[runs.length-1].id+1,  //format the date object created above ...

Get D3.js Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.