3

d3 を使用して、フォーカスとコンテキスト ブラッシングを使用して複数行のグラフを作成しています。ツールチップを含むデータポイントのドットが完全に間違った位置に移動しているトランジションを除いて、すべてがうまくいっています。何が原因なのかわかりません。どんな助けでも大歓迎です。私はここに完全なコードを添付し、バグがどこにあると確信しているかをグラフに書き留めました：

http://jsbin.com/osumaq/20/edit

ボタンをクリックすると、新しい json がグラフに渡されて読み取られます。

私が思うバグのあるコードブロックは次のとおりです。

topicEnter.append("g").selectAll(".dot")
        .data(function (d) { return d.values }).enter().append("circle").attr("clip-path", "url(#clip)")
        .attr("stroke", function (d) {
        return color(this.parentNode.__data__.name)
    })
        .attr("cx", function (d) {
        return x(d.date);
    })
        .attr("cy", function (d) {
        return y(d.probability);
    })
        .attr("r", 5)
        .attr("fill", "white").attr("fill-opacity", .5)
        .attr("stroke-width", 2).on("mouseover", function (d) {
        div.transition().duration(100).style("opacity", .9);
        div.html(this.parentNode.__data__.name + "<br/>" + d.probability).style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px").attr('r', 8);
        d3.select(this).attr('r', 8)
    }).on("mouseout", function (d) {
        div.transition().duration(100).style("opacity", 0)
        d3.select(this).attr('r', 5);
    });

どうもありがとうございました。

4

1 に答える 1