d3.js - D3 reusable chart tootip follows wrong chart when update -
i created 2 graphs based on mike bostock's towards reusable charts, here link visualization: http://jhjanicki.github.io/reusable-chart-tooltip/ tooltip (the circle , vertical line now) seems ok @ first, when either select dropdown item or click on button, line , circle works graph clicked or selected, if go other graph, instead of having tooltip follow lines on graph, seems follow different invisible line instead. i've been stuck on couple of weeks , wondering if point me in right direction. thank much! , here link repo: https://github.com/jhjanicki/reusable-chart-tooltip
the problem both graphs have same xscale
, yscale
so when ever change data reset domain:
xscale .domain(d3.extent(data, function(d) { return d.date; })) .range([0, width- margin.left - margin.right]);
and both graphs looking @ same xscale calculation below fail on mouse over.
xscale.invert(d3.mouse(this)[0]),
you can understand case both graphs same. works. moment change data 1 of graph xscale differ , problem.
so fix both graphs should have different xscale.
Comments
Post a Comment