D3 X值mouseover - 函數返回NaN

所以我想讓M Bostock的x值mouseover example適應我自己的圖形，主要區別在於我有多個系列而不是他的系列。目前，我只是想讓這些圈子發揮作用。我的問題是，當我將鼠標懸停在圖形上（在Firebug中）時，我收到消息：Unexpected value translate(<my_x>, NaN) parsing transform attribute。我嘗試了幾種不同的方法來修復它，但每次都得到相同的響應。我究竟做錯了什麼？D3 X值mouseover - 函數返回NaN

我有一個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

來源

2013-09-25 moarCoffee

你的jsfiddle似乎並沒有做任何高亮。 - 至少當我將鼠標放置的線條沒有任何反應。 –

您正在傳遞函數定義到您的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) + ')'; 
});

來源

2013-09-25 13:10:15

啊，是的，這正是錯誤的。在我修正了一個錯字（'... focus.style（'dispaly'，null）''）之後，一切都是隆重的。謝謝！ – moarCoffee

D3 X值mouseover - 函數返回NaN

回答

相關問題