Javascript D3带工具提示的多行图表转换问题

我一直在使用d3创建一个带有焦点和上下文的多行图表。一切都进行得很顺利，除了在过渡上，带有工具提示的数据点的点移动到了完全错误的位置。我不知道是什么原因造成的。任何帮助都将不胜感激。我在这里附上了完整的代码，并在图中指出，我非常确定错误应该是：

单击按钮时，一个新的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);
    });

topicEnter.append（“g”）。选择全部（“.dot”）
.data（函数（d）{return d.values}）.enter（）.append（“circle”）.attr（“剪辑路径”、“url（#剪辑）”）
.attr（“笔划”，功能（d）{
返回颜色（此.parentNode.\u数据\u.name）
})
.attr（“cx”，功能（d）{
返回x（d.日期）；
})
.attr（“cy”，函数（d）{
返回y（d.概率）；
})
.attr（“r”，5）
.attr（“填充”、“白色”）.attr（“填充不透明度”，.5）
.attr（“笔划宽度”，2）.on（“鼠标悬停”，功能（d）{
div.transition（）.duration（100）.style（“不透明度”，.9）；
div.html（this.parentNode.\uuuuu data\uuuuu.name++“
“+d.probability”）.style（“left”、（d3.event.pageX）+“px”）.style（“top”、（d3.event.pageY-28）+“px”）.attr（'r'，8）；
d3.选择（this）.attr（'r'，8）
}).开启（“鼠标出”，功能（d）{
div.transition（）.duration（100）.style（“不透明度”，0）
d3.选择（this）.attr（'r'，5）；
});

---

非常感谢。

你说的工具提示是什么意思？是我们在点上悬停时出现的窗口吗？它们看起来很好。我能看到的是，当线条移动时，你的点没有移动，如果我不得不猜测的话，我会说你的输入和更新选择是混合的。如果这些点已经出现在屏幕上，并且您想要更新它们的位置（通过调用您的方法

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);
    })
    [...]

---

是的，我指的是包含工具提示的圆圈，对此表示抱歉。这就是问题所在，我正试着照你说的做，但还是不起作用。看起来一开始新的点不会消失，只有新的（红色）线在正确的位置有圆圈。一旦开始在底部的“图形焦点”和“上下文”滑块上播放，现在x轴已过时的旧圆将消失，但新圆的y轴错误，但至少x轴正确。