lesson based on dashing 06 - event action at a distance

event-mouseover.md

d3 event handler

Goal

Change graph focus based on mouse location.

learning objectives

1. on keyword
2. mouseover keyword
3. mouseout keyword
4. JavaScript fat arrow function syntax =>
5. using nodes[index] as alternative to this

Question: what event did we use with the radio buttons in the previous lesson?

Set Up

1. create new project called mouse-events
2. create index.html
3. put d3.js into js sub-directory
4. create main.js
5. link index.html to d3.js and main.js

Create svg viewport

Create svg viewport with a size of 300x300.

1. select body
2. append svg
3. add attributes for width and height

Create Circle

Create circle with a center of 25, 25 and radius of 25.

Create Dataset for Circle

We will create multiple circles from a dataset.

Start with data for one circle.

const dataset = [
  { cx: 25, cy: 25, r: 25, color: 'red' }
];

Add first circle to svg viewport

Circle has no attributes and will not appear in the viewport. You can check it in the inspector.

const circles = svg.selectAll('circle')
  .data(dataset)
  .enter()
  .append('circle');

Extend Data

    const dataset = [
      { cx: 25, cy: 25, r: 25, color: 'red' },
      { cx: 25, cy: 100, r: 25, color: 'green' },
      { cx: 25, cy: 175, r: 25, color: 'blue' },
      { cx: 25, cy: 250, r: 25, color: 'orange' }];

With four objects of data, four circles will be created, each circle bound to one data object.

Circles are still not visible as the attributes for the circles have not been set.

Set circle attributes

Using fat arrow functions, which replaces function() in this exercise.

The following is a shorter way or writing function(d) { return d.cx }.

    circles
      .attr('cx', d => d.cx)
      .attr('cy', d => d.cy)
      .attr('r', d => d.r);

Add mouseover event listener

The two keywords are:

1. on

2. mouseover

    circles.on('mouseover', () => {
      console.log('mouse over circle');
    });
   

Check that you get the correct message in the console each time you move the mouse over the circle.

Change circle position based on mouseover

add data, index, nodes to callback function

    circles.on('mouseover', (data, index, nodes) => {

    });

select the current circle you have the mouse over

    const currentCircle = d3.select(nodes[index])

transition circle cx position

    circles.on('mouseover', (data, index, nodes) => {
      const currentCircle = d3.select(nodes[index]);
      currentCircle
        .transition()
        .attr('cx', '275')
        .transition()
        .attr('cx', '25');
    });

Demo

change color at each transition

Code Example

circles.on('mouseover', (data, index, nodes) => {
  const currentCircle = d3.select(nodes[index]);
  currentCircle
    .transition()
    .attr('cx', '275')
    .style('fill', 'green')
    .transition()
    .attr('cx', '25')
    .style('fill', 'black');
});

Change Opacity

Chain the new transitions to previous transition.

        .style('fill', 'black')
        .transition()
        .attr('opacity', '0')
        .transition()
        .attr('opacity', '1');
    });