This page is about finding the visible elements on the page. You can also select the data points inside of those elements.

With an event

In the function that deals with the event, use d3.select(this). d is the data point, this is the visible thing that was clicked.

Using d3.select(this) with a hover

d3.selectAll("circle")
  .data(datapoints)
  .enter().append("circle")
  .on('mouseover', function(d) {
    var element = d3.select(this);
    element.attr("fill", "red");
  })
  .on('mouseout', function(d) {
    var element = d3.select(this);
    element.attr("fill", "grey");
  })

Select by id (unique)

If the element is unique, use the id with d3.select. Usually these are elements you’ve drawn on the page one-by-one, instead of something bound with data.

For example: legends, annotations,

Fade out a notation about George Washington

d3.input("#washington-notation")
  .transition()
  .attr('opacity', '0')

Select by class (category)

It’s useful to be able to select a subset of elements based on a categorical attribute.

Select all of the elements from Vermont, or from West Virginia

d3.selectAll(".vermont")
d3.selectAll(".west-virginia")

Adding the categorical class

When binding your data, just add a class (or classes) based on that attribute. Separate multiple classes with a space - class="city west-virginia" is two classes, city and west-virginia. class="city west virginia" is three classes, city, west, and virginia.

In this example, city circles are given their state as a class.

d3.selectAll(".city-circle")
  .data(datapoints)
  .enter().append("circle")
  // .attr("r", ...) etc etc
  .attr("class", function(d) {
    // Get rid of spaces in the state name, and lowercase can be nice as well
    return "city-circle " + d.statename.toLowerCase().replace(" ","-")
  });

Select by filter (numerical)

Once you’ve bound your data, select only elements meeting certain criteria using filter. I say it’s best for numeric data, but it will even work with categorical variables:

.filter( function(d) { 
  return d.country == "America";
})

For example, maybe you have a map of cities, each represented by a circle. This will select city circles with more 250000 people in them and make them red.

d3.selectAll(".city")
  .filter(function(d) { 
    return d.population > 250000 
  })
  .attr('fill', 'red');

Select nearest to mouse

This one is a little more complicated. It basically reverses the scale - usually you go from VALUES to POINTS, but it takes your mouse position and goes from POINTS to VALUES.

This version gives you the SVG element you’re closest to (maybe you want to highlight it), while the one in the data section gives you the data of the element you’re closest to.

.on('mousemove', function() {
  // invert the scale to go from PIXELS to YEARS
var mouse = d3.mouse(this);
  var mouseYear = xPositionScale.invert(mouse[0]);

  // get all the circles
  var points= d3.selectAll(".points");

  // find the index of the circle closest to that year in the dataset
  var index = d3.bisector(function(d) { return d.year; })
    .left(circles, mouseYear);

  // make that circle red
  circles[index].attr("fill", "red");
})

Your best bet is to look at this code, starting at the var focus... part.