2016-05-15 9 views
1

私は、スライダを使ってページの矩形を移動する基本的なプログラムを作っています。私はd3.jsでイベントリスナーをカスタマイズするにはどうすればよいですか?

<input type = "range" min = "5" max = "500" value = "5" id = "xvalue" > 

ようなものを使用してスライダーを設定した後、更新()は矩形の位置を変更する機能である

d3.select("#xvalue").on("input", function() { 
    update(+this.value, "x"); 
}); 

とスライダーの値を参照することができます。

スライダの値が変更されると、イベントリスナがトリガされます。しかし、スライダーの "max"と "min"属性が変化したときにイベントリスナーがトリガーされるように思えます。

入力リスナーは、入力オブジェクトの「値」属性が変更され、他の属性が変更されない場合にのみトリガーされます。

答えて

1

"min"または "max"を変更してもイベントが発生しないようです。

d3.select("#xvalue").on("input", function() { 
    console.log("The value is " + this.value); 
}); 

そして、私は2つのボタン、背面5にそれを設定し、30およびその他の分値を設定1作成:たとえば、私はちょうどあなたのようでしたアイム

d3.select("#button1").on("click", function(){ 
    document.getElementById("xvalue").setAttribute("min", 30); 
}); 

d3.select("#button2").on("click", function(){ 
    document.getElementById("xvalue").setAttribute("min", 5); 
}); 

をボタンをクリックしてもリスナを起動させるわけではなく、「最小」の値を変更するだけです。他のボタンの後にあるボタンをクリックしたときにスライダーが動くのを見ることができますが、コンソールには何も記録されていません。

+0

Strange。元のプログラムでChromeのデバッガを追跡したところ、実際には完全に理解できないほど深刻な問題を示唆していないという事実がイベントを引き起こしていることを示唆していました。 「min」が変更されたときにトリガーするイベントリスナーを設定する方法を知っていますが、「max」が変更されたときにトリガーしない方法はありますか? – puzzler10

+0

私はそれについて聞いたことがありません...試してみてください:新しい質問を投稿し、minまたはmaxを変更したときにトリガーするイベントリスナーについて質問してください(存在すれば!)、タグ "JavaScript"と "html"をあなたの質問ですが、 "d3"ではありません。確かに、1つのJavaScriptウィザードが答えを表示します。 –

+0

ご参考まで:*どのように「最小」の値を変更していますか?これは問題を解決するために重要です。 –

関連する問題