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 O’Reilly online learning.

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