如何移动或设置d3.js滑块手柄

Question

我有一个d3.js滑块手柄，我需要在点击事件执行计算时移动到适当的刻度线。现在，这是它在页面加载上的外观：

然后我使用导致此值的javascript执行计算：

var sl1 =（100 *（（ec 1。value + 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);
});

问题是，每次用户点击时它都会不断添加新句柄。它看起来如下：

如何制作句柄＆＃34;刷新＆＃34;或只是显示一个句柄而不是不断添加一个新句柄？

感谢任何回应。

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（＆＃34;＃handle-one）.remove（）;因为我有3个滑块，所有的类＆＃34; d3-slider-handle＆＃34;由d3.slider自动命名，名称相同，＆＃34; handle-one＆＃34;。

希望这有助于某人。