d3.js - 如何移动或设置 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);
});

问题是，每次用户点击时，它都会不断添加一个新句柄。如下所示：

如何使句柄“刷新”或仅显示单个句柄而不是不断添加新句柄？

感谢任何回应。

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("#handle-one).remove(); 因为我有 3 个滑块，所有类“d3-slider-handle”都由 d3.slider 自动命名为同名“handle-one ”。

希望这可以帮助某人。