CODEWITHSUNDEEP
javascriptd3.jsdata-visualizationdom-eventsmousemove
lewis500
lewis500

Reputation: 99

Simultaneous cursors

I'm trying to emulate this graph: http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html

Here is the bare-bones rendition: http://jsfiddle.net/jd5Ym/6/

I can't get the different cursors to each follow the data for their own city. I can only do one at a time. My code depends on this function:

function mousemove() {
  // p is the fraction of a graph traversed. decimalize strips integers.
var p=decimilize((x0.rangeBand()-d3.mouse(this)[0]+margin.left)/(x0.rangeBand())); 
var u=data[Math.round(data.length-p*data.length)];
var v=cities[1].values[Math.round(data.length-p*data.length)];
cursor.data(data).attr("transform", "translate(" + (x1(u.date)) +","+y(v.temperature)+")");
        }

Where it says v=cities[1], the index decides which city's data to follow. I want it to index each city itself, but when I try using the function (d,i) {...} setup, it doesn't work out, and I tried appending the mousemovefunction within a transform attribute in the declaration of city, and that didn't work either.

I am a beginning programmer so maybe this is easy. The data structure and parsing come out of Mike Bostock's examples.

Upvotes: 1

Views: 104

Answers (1)

Victor Powell
Victor Powell

Reputation: 1848

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/

Upvotes: 1

Related Questions