如何移動或設置d3.js滑塊手柄

Question

我有一個d3.js滑塊手柄，需要在單擊事件執行計算時移動到適當的刻度標記。眼下，這是它的外觀在頁面加載：

VAR SL1 =（100 *（（EC 1：

然後我使用JavaScript導致該值進行計算。值+ ec [3] .value/ec [0] .value））。toFixed（0）;

現在，我想要移動句柄來匹配sl1計算值，我使用以下內容：

<!--sliders--> 
<link href="~/d3/d3-slider.css" rel="stylesheet" type="text/css" media="all" /> 
<script src="~/d3/d3.slider.js" type="text/javascript"></script> 

<div id="slider1Div" style="margin: 0 auto;height:auto;"> 
    <p style="margin-bottom:5px;text-align:center;"> 
     Percent of Cropland With One or More Structural Practices<br /> 
     <h12><span id="slider1text">0</span></h12> 
    </p> 
    <div id="swift1Slider" class="greenLeft" style="width:80%;margin: 0 auto;"> 
</div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     d3.select("#swift1Slider").call(d3.slider().axis(true).value([0]).on("slide", function (evt, value) { 
     var sliderVal1 = value.toFixed(2); 
     d3.select('#slider1text').text(sliderVal1);    
    })) 

    //populate sliders 
    var sl1 = (100 * ((ec[1].value + ec[3].value)/ec[0].value)).toFixed(0); 

    //move the slider handle 
    d3.select('#slider1text').text(sl1); 
    d3.select("#swift1Slider").attr("value", sl1); 
    d3.select("#swift1Slider").call(slider1); 
}); 

問題是，它每次用戶點擊時都會一直添加新的句柄。它看起來像如下：

如何讓我把手「刷新」或僅顯示一個手柄，而不是不斷地增加一個新的？

欣賞任何迴應。

Answer 1

沒關係。我有多個滑塊，我沒有在上面顯示。解決的方法是相當簡單：

//calculate values: 
var sl1 = (100 * ((ec[1].value + ec[3].value)/ec[0].value)).toFixed(0); 
var sl2 = (100 * ((ec[2].value + ec[3].value)/ec[0].value)).toFixed(0); 
var sl3 = (100 * (ec[7].value/myTotal)).toFixed(0);      //urban 

      d3.select('#slider1text').text(sl1); 
      d3.select('#slider2text').text(sl2); 
      d3.select('#slider3text').text(sl3); 

      //move the handle 
      d3.selectAll("#handle-one").remove(); 
      var slider1 = d3.slider().value(sl1); 
      d3.select("#swift1Slider").call(slider1); 

      var slider2 = d3.slider().value(sl2); 
      d3.select("#swift2Slider").call(slider2); 

      var slider3 = d3.slider().value(sl3); 
      d3.select("#swift3Slider").call(slider3); 

的關鍵是d3.selectAll（「＃手柄一）一個.remove（）;因爲我有3個滑塊，所有的類‘D3滑塊手柄’被自動命名由d3.slider同名，「手柄一」

希望這可以幫助別人