D3.js Quick Start Guide

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 ...