0

因此，我正在尝试将 M Bostock 的 x 值鼠标悬停示例改编为我自己的图表，主要区别在于我有多个系列而不是他的系列。目前我只是想让这些圈子发挥作用。我的问题是，当我将鼠标悬停在图表上（在 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

4

1 回答 1

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) + ')';
});
于 2013-09-25T13:10:15.147 回答