我正在尝试模拟此图: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]
的地方,索引决定了要追踪哪个城市的数据。我希望它为每个城市本身建立索引,但是当我尝试使用function (d,i) {...}
设置时,它无法解决问题,并且我尝试在城市的声明中的转换属性内附加mousemove
函数,但这没有也不能工作。
我是一名初学者,所以也许这很容易。数据结构和解析来自Mike Bostock的示例。
您应使用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/