D3 X 값 mouseover - 함수가 NaN

Question

을 반환합니다. 따라서 M Bostock의 x 값 마우스 오버 example을 내 그래프에 적용하려고합니다. 주된 차이점은 자신의 여러 계열이 아니라는 점입니다. 지금은 서클을 작동 시키려고합니다. 내 문제는 내가 mouseover 때 (방화범이 끌리는에서 그래프) 메시지가 나타납니다 : Unexpected value translate(<my_x>, NaN) parsing transform attribute. 여러 가지 방법으로 해결했지만 여러 번 동일한 반응을 보입니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

은 내가 jsFiddle을 가지고 있고, 문제는 하단에 :

var focus = main.append('g') 
    .attr('class', 'focus') 
    .style('display', 'none'); 

var circles = focus.selectAll('circle') 
    .data(sets) // sets = [{name: ..., values:[{date:..., value:...}, ]}, ] 
    .enter() 
    .append('circle') 
    .attr('class', 'circle') 
    .attr('r', 4) 
    .attr('stroke', function (d) {return colour(d.name);}); 

main.append('rect') 
    .attr('class', 'overlay') 
    .attr('width', w) 
    .attr('height', h) 
    .on('mouseover', function() {focus.style('dispaly', null);}) 
    .on('mouseout', function() {focus.style('display', 'none');}) 
    .on('mousemove', mousemove); 

function mousemove() { 
    var x0 = x_main.invert(d3.mouse(this)[0]), 
     i = bisectDate(dataset, x0, 1), 
     d0 = dataset[i - 1].date, 
     d1 = dataset[i].date, 
     c = x0 - d0 > d1 - x0 ? [d1, i] : [d0, i - 1]; 

    circles.attr('transform', 'translate(' + 
     x_main(c[0]) + ',' + 
     y_main(function (d) {return d.values[c[1]].value;}) + ')' 
    ); 

== 편집 ==

작업 jsFiddle

Answer 1

당신은 당신의 y_main에 함수 정의에 전달하는 눈금 :

circles.attr('transform', 'translate(' + 
    x_main(c[0]) + ',' + 
    y_main(function (d) {return d.values[c[1]].value;}) + ')' 
); 

selection.attr은 문자열 값이나 콜백 함수를 사용할 수 있지만이 두 가지를 혼합하려고 시도합니다. 문자열을 전달하는 중 문자열이 생성되면 함수 자체를 값으로 크기를 조정하여 NaN을 반환합니다.

기능 버전 (전체 변환 값을 반환)과 같아야합니다

는

circles.attr('transform', function(d) { 
    return 'translate(' + 
     x_main(c[0]) + ',' + 
     y_main(d.values[c[1]].value) + ')'; 
});