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 に答える