2016-11-27 6 views
1

Ich versuche, auf die Werte von diesem Schieberegler (http://sujeetsr.github.io/d3.slider/) für ein Diagramm zugreifen, die vor den Schiebereglern auf der gleichen Seite angezeigt werden.Javascript: Zugriff Schieberegler Wert

<body> 
    <script> 
     function onload(){ 
      var test = getDocumentElementById('test').value 
      alert(test) 
     } 
    </script> 
    ... 
    <h4> Slider 1 </h4> 
    <div id='test'></div> 
    ... 
    <script> 
     var slider = d3.slider().min(0).max(1).ticks(1).showRange(true);    
     d3.select('#test').call(slider); 
    </script> 

</body> 

Ich kann nicht auf den Schieberegler Wert zugreifen. Jede Hilfe wäre willkommen.

Antwort

2

Seltsamerweise scheint es, dass dies nicht gut dokumentiert ist. Hier ist, was ich gefunden: Sie können entweder einen Rückruf fügen Sie den Wert zu fangen oder rufen Sie den Wert() Funktion ohne Argument den aktuellen Wert zu erhalten:

var slider = d3.slider() 
     .min(0) 
     .max(10) 
     .showRange(true) 
     .value(5) 
     .callback(function(evt) { 
     //fired every time the value changes 
     logger.debug('callback: ' + self.slider.value()); 
     }); 

d3.select('#myslider').call(slider); 
var currentVal = slider.value(); //manually get the current value 
1

das Slider-Objekt gibt den Wert durch den Aufruf ist es Wert() -Funktion, es bindet es nicht an das Div. Sie müssen also den Schieberegler in dem Bereich halten, in dem Sie ihn verwenden möchten, und auf den Wert in Javascript vom Schiebereglerobjekt selbst zugreifen.

var slider = d3.slider().min(0).max(1.0).ticks(10).showRange(true); 

document.getElementById('showButton').addEventListener('click', function(){ 
    alert(slider.value()); 
}) 

Es unterstützt auch das Hinzufügen einer Callback-Funktion, diese wird aufgerufen, wenn Sie es schieben.

var slider = d3.slider() 
     .min(0) 
     .max(1.0) 
     .ticks(10) 
     .showRange(true) 
     .callback(function(a){ 
        console.log(slider.value()); // <-- this will call when you slide 
       }); 
d3.select('#test').call(slider); 

Hier ist ein JSFiddle, welches die Anwendungsfälle: https://jsfiddle.net/workingClassHacker/0wgps84y/8/

Verwandte Themen