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

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

1 个答案: