O'Reilly logo

D3.js Quick Start Guide by Matthew Huntington

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required