帶有工具提示過渡問題的 D3 多線圖

Question

我一直在使用 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);
    });

非常感謝你。

Answer 1

你說的工具提示是什么意思？ 是當我們將鼠標懸停在點上時出現的窗口嗎？ 他們看起來很好。 我可以看到的是，當線條移動時，您的點沒有移動，如果我不得不猜測，我會說您的輸入和更新選擇是混合的。 如果這些點已經在屏幕上並且你想更新它們的位置（通過調用你的方法update ），你應該有以下幾行：

// Bind your data
topicEnter.append("g").selectAll(".dot")
    .data(function (d) { return d.values })
// Enter selection
topicEnter.enter().append("circle").attr("clip-path", "url(#clip)").attr("class", "dot");
// Update all the dots
topicEnter.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);
    })
    [...]