How to update descriptor location on D3js dynamic chart slider?

Question

Here is a simple sample table script.

I am new to learn about D3.js.

I couldn't figure out tutorials or documentation on how to create a tooltip, such as Mike Bostock made in his amazing New York Times Rent Versus Buy calculator , shown here:

I tried to look at its source code, but I was not lucky enough to find out.

In my sample script , I have the following code (and much more):

var handle = slider.append("g").attr("class", "g-parameter-value handle"); var initialXPos = xAxisScale(chartEl.attr("data-value")); handle.append("path").attr("d", "M-5.5,-2.5v10l6,5.5l6,-5.5v-10z") .attr("transform", "translate(" + initialXPos + "," + -6 + ")"); handle.append("text").style("text-anchor", "middle").attr("y", 20).attr("dy", ".71em"); 

I'm not sure why the handle does not move when dragging [even if it successfully changes the values ​​of the input field and any associated diagrams (not shown in the script)].

I also could not figure out how to “fix” and format the numerical value (as a result of drag and drop), which will be placed in the input text box.

Even pointing at me in the right direction, we will be very grateful!

Answer 1

Three necessary changes (but you need more of this):

• handle is a <path> , and paths do not have the x attribute. So the first change:

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

• As you can see, I am 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 + ")"); 

• At your input, just use h :

   input.property('value', h); 

However, there is an additional problem: you do not have a function named drawAllCharts . Thus, you will need to create a specific update function to modify the columns.

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