Как обновить расположение дескриптора на слайдере динамической диаграммы D3js?

Question

Here is a fiddle of a simple sample chart.

Я новый к изучению D3.js.

Я не мог понять, через учебники или documentation как создать всплывающую подсказку, как Майк Босток сделал в своей удивительной Rent Versus Buy calculator in the New York Times, как показано здесь:

Я попытался посмотреть по его исходному коду, но не успел это выяснить.

В my sample fiddle, я следующий код (и многое другое):

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"); 

Я не знаю, почему ручка не двигается при перемещении [даже если он успешно изменяет значения свойств поле ввода и любых связанных диаграмм (не показано на скрипке)].

Я также не смог выяснить, как «исправить» и форматировать числовое значение (в результате перетаскивания), которое помещается во входное текстовое поле.

Даже указывая на меня в правильном направлении, мы будем очень благодарны!

Answer 1

Три необходимые изменения (но вам нужно больше, чем это):

1. handle является <path>, и пути не имеют атрибут x. Таким образом, первое изменение:

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

2. Как вы можете видеть, я определяю новую переменную здесь:

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

3. В вашем входе, просто используйте h:

   input.property('value', h); 
   

Однако есть дополнительная проблема: у вас нет функции под названием drawAllCharts. Таким образом, вам нужно будет создать определенную функцию для изменения баров.

Это обновленная скрипка: https://jsfiddle.net/bh58u8ks/