0
我有一個d3.js滑塊手柄,需要在單擊事件執行計算時移動到適當的刻度標記。眼下,這是它的外觀在頁面加載:如何移動或設置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);
});
問題是,它每次用戶點擊時都會一直添加新的句柄。它看起來像如下:
如何讓我把手「刷新」或僅顯示一個手柄,而不是不斷地增加一個新的?
欣賞任何迴應。