score:1

Accepted answer

You should use selectAll('.cities').each(...) to step over all the cities and update their cursors independently.

function mousemove() {
  // the proportion of the way across any given graph that the mouse is
  var mouseX  = d3.mouse(this)[0]
  var graph_width = x0.rangeBand()
  // the corresponding data
  var index = Math.floor( ( mouseX / graph_width ) * data.length );
  d3.selectAll('.city')
    .each(function(d, i){
      var u = cities[i].values[index];
      d3.select(this).select('.cursor')
        .attr('transform', 'translate(' + x1(u.date) + ',' + y(u.temperature) + ')')
    })
}

See here for the full working example: http://jsfiddle.net/jd5Ym/9/


More Query from same tag