D3js動的チャートのスライダでハンドルの位置を更新するにはどうすればよいですか？

Question

Here is a fiddle of a simple sample chart.

私は約D3.jsを学ぶに新しいています。

私はマイク・ボストックは、彼の素晴らしいRent Versus Buy calculator in the New York Timesに行ったようにツールチップを作成する方法のチュートリアルやdocumentationを通じて把握することはできませんされましたが、ここに示す：

私が見てみました彼のソースコードでは、それを考え出して運がなかった。 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. あなたが見ることができるように、私はここに新しい変数を定義しています：ちょうどhを使用し、あなたの入力で

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

3. を：

   input.property('value', h); 
   

ただし、別の問題があります。という機能はありません210。バーを変更するには、特定のアップデート関数を作成する必要があります。

ここに更新されたフィドルです：https://jsfiddle.net/bh58u8ks/