同时游标

时间:2013-01-19 19:23:51

标签: javascript-events d3.js data-visualization mousemove

尝试模拟此图表:http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html

以下是简单的演绎:http://jsfiddle.net/jd5Ym/6/

我不能让每个游标都跟随他们自己城市的数据。我一次只能做一个。我的代码依赖于这个函数:

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)+")");
        }

表示“v = cities [1]”,索引决定跟随哪个城市的数据。我希望它能为每个城市编制索引。但是当我尝试使用“功能(d,i){...}”设置时,它无法解决问题。我尝试在城市声明中的transform属性中附加mousemove函数,但这也不起作用。

我是一名初学程序员,所以这很容易。数据结构和解析来自mike bostock的例子。

1 个答案:

答案 0 :(得分:1)

你应该使用selectAll('。cities')。each(...)遍历所有城市并独立更新他们的游标。

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) + ')')
    })
}

请参阅此处查看完整的工作示例:http://jsfiddle.net/jd5Ym/9/