D3 X-value mouseover - function返回NaN [英] D3 X-value mouseover - function returns NaN

问题描述

因此，我试图将M Bostock的x值滑鼠悬停示例改为我自己的图形，主要的区别是，我有多个系列，而不是他的一个。现在我只是想让圈子工作。我的问题是，当我鼠标悬停图（在Firebug），我得到的消息：意外值translate（< my_x> ;, NaN）解析变换属性。我试过几种不同的方法来解决它，但我得到相同的响应，每次。我做错了什么？

So I am trying to adapt M Bostock's x-value mouseover example to my own graph, the main difference being that I have multiple series instead of his one. For the moment I'm just trying to get the circles to work. My problem is that when I mouseover the graph (in Firebug) I get the message: Unexpected value translate(<my_x>, NaN) parsing transform attribute. I've tried several different ways to fix it but I get the same response each time. What am I doing wrong?

我有一个 jsFiddle ，问题在底部：

I have a jsFiddle, and the issue is at the bottom:

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

== EDIT ==

== EDIT ==

jsFiddle

推荐答案

您将函数定义传递到 y_main 范围：

You're passing in a function definition into your y_main scale:

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

selection.attr 可以接受字符串值或回调函数，但这是试图混合这两个。你传递一个字符串，并且作为字符串构造它试图把函数本身作为一个值，它将返回NaN。

selection.attr can take a string value or a callback function but this is trying mixing both of those. You're passing in a string and as the string is constructed it tries to scale the function itself as a value, which will return NaN.

函数版本应该看起来像（返回整个转换值）：

The function version should look like this (returning the entire transform value):

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

这篇关于D3 X-value mouseover - function返回NaN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！