D3多行图表与工具提示转换问题

D3 Multiline Chart with Tooltip Transition Issue

本文关键字：工具提示 转换 问题 D3      更新时间：2023-09-26

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

非常感谢。

工具提示是什么意思？当我们悬停在点上时，会出现窗口吗？他们看起来很好。我能看到的是，当线条移动时，你的点没有移动，如果我不得不猜测的话，我会说你的输入和更新选择是混合的。如果这些点已经在屏幕上了，并且你想更新它们的位置（通过调用你的方法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);
    })
    [...]
相关文章：