同時光標

Question

試圖仿效該圖：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 =城市[1]」，該指數決定城市的數據要跟蹤的。我希望它能爲每個城市本身編制索引。但是，當我嘗試使用「功能（d，我）{...}」設置，它不會奏效。我嘗試在City的聲明中的轉換屬性中追加mousemove函數，但這也不起作用。

我是一個開始的程序員，所以也許這很容易。數據結構和解析來自mike bostock的例子。

Answer 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/