clickingsvg.js

// The React.Component from before.
// This is just highlighting the differences.

import * as d3 from 'd3';

class DCMetroMap extends React.Component {
  
  componentDidMount() {
    // For every group inside of #Stations...
    d3.selectAll('#Stations g')
      // Append a circle element...
      .append('circle')
        // style, position, and size the circle
        .style('fill', 'rgba(0,0,0,0)')
        .style('pointer-events', 'all')
        .attr('r', getRadius)
        .attr('cy', getY)
        .attr('cx', getX)
        // handle events on the circle!
        .on('click', handleClick);
    
    // When a circle is clicked, we change it's color
    function handleClick() {
      // Un-highlight previously selected station
      d3.selectAll('#Stations g circle').style('fill', 'rgba(0,0,0,0)');
      
      // Here's that semantic information we hand coded into the svg file! 
      const stationId = this.parentNode.id;
      
      // Highlight this station
      // `this` context is the `circle` we appended above
      d3.select(this).style('fill', 'rgba(250,0,0,0.7)');
      
      // We pass off the stationId so our parent component can load the data about
      // metro arrival times. SWISH
      this.props.onClick(stationId);
    }
  }
  
  //   ... render(), etc
}