具有工具提示转换问题的D3多线图 [英] D3 Multiline Chart with Tooltip Transition Issue

问题描述

我一直在使用d3创建一个带有焦点和上下文刷的多线图。一切进展顺利，除了在转换过程中，数据点处的点与工具提示一起移动到完全错误的位置。我无法弄清楚造成这种情况的原因。任何帮助将非常感激。我在这里附上了完整的代码，并在图表上注明我非常确定该错误应该是：

I have been using d3 to create a multiline chart with focus and context brushing. Everything is going well except on the transition the dots at the data points with the tooltips are moving to a completely wrong position. I can't figure out what is causing this. Any help would be much appreciated. I attached the full code here and noted on the graph where I'm pretty sure the bug should be:

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

单击按钮时，一个新的json被传递给图表进行阅读。

When the button is clicked, a new json is passed to the graph to read.

我认为这个错误的代码块是这样的：

The buggy block of code I think is this:

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);
    });

非常感谢。

推荐答案

工具提示是什么意思？它是我们悬停在点上时出现的窗口吗？他们似乎很好。我可以看到的是，你的点不会在线条移动时，如果我不得不猜测我会说你的输入和更新选择是混合的。如果这些点已经在屏幕上并且您想要更新它们的位置（通过调用您的方法更新），您应该在这些方面有一些东西：

What do you mean by tooltip ? Is it the window that appears when we hover on dots ? They seem fine. What I can see is that your dots are not moving while the lines are, and if I had to guess I would say your enter and update selections are mixed. If the dots are already on screen and you want to update their position (by calling your method update) you should have somthing along these lines :

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

这篇关于具有工具提示转换问题的D3多线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！