8. Bringing the Chart to Life with Interactions | Data Visualization with D3 and AngularJS

Listen for events

Interactions in JavaScript are based on the concept of events and event listeners. This concept works like this: first, one defines an event listener on an element. Then, it waits for a specific event of the element to occur, for example, this could be a click event. Every time the event occurs (the element is clicked on), a callback function is executed. Having said that, we can attach listeners to any element of the DOM and trigger functions as soon as the event occurs.

In D3.js, we can attach listeners directly to Selections via the .on(event, callback) method. Whenever D3.js handles an event, the d3.event variable stores all the information of the currently triggered event. Let's look at a simple example:

svg.on('click', function(){

  var e = d3.event;

  // Get relative cursor position
  var xpos = (e.offsetX==undefined) ? e.layerX : e.offsetX;
  var ypos = (e.offsetY==undefined) ? e.layerY : e.offsetY;

  svg.append("circle")
    .attr("cx", xpos)
    .attr("cy", ypos...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Data Visualization with D3 and AngularJS

By : Hanchett, Körner

Data Visualization with D3 and AngularJS

By: Hanchett, Körner

Overview of this book

Listen for events

Data Visualization with D3 and AngularJS

By : Hanchett, Körner

Data Visualization with D3 and AngularJS

By: Hanchett, Körner

Overview of this book

Listen for events

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access