동시 커서이 그래프를 모방하려고

Question

: 여기

http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html가 빈약 연주입니다 : http://jsfiddle.net/jd5Ym/6/

각각 자신의 도시에 대한 데이터를 따라 내가 다른 커서를 얻을 수 없습니다. 한 번에 하나씩 만 할 수 있습니다. 내 코드는이 기능에 따라 다릅니다은 "V = 도시 [1]"인덱스가 도시의 데이터가 따라야하는 결정 말한다

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

합니다. 각 도시 자체에 지수를 부여하고 싶습니다. 그러나 "function (d, i) {...}"설정을 사용하려고하면 제대로 작동하지 않습니다. 그리고 도시의 선언에 변형 속성 내에서 mousemove 함수를 추가하려고 시도했지만 그 중 하나도 작동하지 않았습니다.

저는 시작 프로그래머입니다. 아마도 이것은 쉽습니다. 데이터 구조와 구문 분석은 마이크 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/