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

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -