D3 X 值鼠标悬停 - 函数返回 NaN

Question

所以我试图将 M Bostock 的 x 值鼠标悬停 example 调整到我自己的图表中，主要区别在于我有多个系列而不是他的系列。目前我只是想让这些圈子发挥作用。我的问题是，当我将鼠标悬停在图表上（在 Firebug 中）时，我收到消息：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) + ')';
});