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
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);
});
Thank you very much.
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);
})
[...]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.