How To Update Handle Location On Slider Of D3js Dynamic Chart?

Here is a fiddle of a simple sample chart. I am new to learning about D3.js. I've been unable to figure out through tutorials or documentation how to create a tooltip like Mike Bos

Solution 1:

Three necessary changes (but you'll need more than that):

1. handle is a <path>, and paths don't have a x attribute. So, the first change is:

   handlePath.attr("transform", "translate(" + xAxisScale(h) + ",0)");
   

2. As you can see, I'm defining a new variable here:

   var handlePath = handle.append("path").attr("d", "M-5.5,-2.5v10l6,5.5l6,-5.5v-10z")
       .attr("transform", "translate(" + initialXPos + "," + -6 + ")");
   

3. In your input, just use h:

   input.property('value', h);
   

However, there is an additional problem: you don't have a function called drawAllCharts. So, you'll have to create a specific update function to change the bars.

Here is the updated fiddle: https://jsfiddle.net/bh58u8ks/