滑块适用于d3.js v3但不适用于v4

Question

我有一些滑块可以在“https://d3js.org/d3.v3.min.js”中正常工作，但不能在“https://d3js.org/d3.v4.min.js”＆gt;中工作。谁能建议如何在第4版中完成这项工作？版本3中的快照：

以下是我的代码：

<script src="https://d3js.org/d3.v3.min.js"></script>
<link href="~/d3/d3-slider.css" rel="stylesheet" type="text/css" media="all" />
<script src="~/d3/d3.slider.js" type="text/javascript"></script>

<style>
.handle{
    position: absolute;
    width: 1.2em;
    height: 1.5em;
    background-image: url(../images/handle.png);
    background-repeat: no-repeat;
    z-index: 3;
}   

.greenLeft{
    background: #90D47C; /* Old browsers*/
    background: -moz-linear-gradient(top, #90D47C 0%, #BDF998 36%, #398235 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #90D47C 0%, #BDF998 36%, #398235 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #90D47C 0%, #BDF998 36%, #398235 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90D47C', endColorstr='#398235',GradientType=0 ); /* IE6-9 
    */
}

.coralLeft{
    background: #ff5c5c; /* Old browsers */
    background: -moz-linear-gradient(top, #ff5c5c 10%, #febbbb 36%, #ff5c5c 100%); /* FF3.6-15  */
    background: -webkit-linear-gradient(top, #ff5c5c 10%, #febbbb 36%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff5c5c 10%, #febbbb 36%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */
}

.orangeLeft{
    background: #ff7400; /* Old browsers */
    background: -moz-linear-gradient(top, #ff7400 0%, #fac695 36%, #ff670f 100%); /* FF3.6-15  */
    background: -webkit-linear-gradient(top, #ff7400 0%, #fac695 36%,#ff670f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff7400 0%, #fac695 36%,#ff670f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */
}

<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><strong><span id="slider1text">0</span></strong></h12>
</p>
<div id="swift1Slider" class="greenLeft" style="width:40%;margin: 0 auto;">       </div>
</div>

<br /><br />
<div id="slider2Div" style="margin: 0 auto;height:auto;">
    <p style="margin-bottom:5px; text-align:center;">
    Percent of Cropland With Some Level of Reduced Tillage <br />
    <h12><strong><span id="slider2text">0</span></strong></h12>
    </p>
<div id="swift2Slider" class="coralLeft" style="width:40%;margin: 0 auto;">    </div>
</div>

<br /><br />
<div id="slider3Div" style="margin: 0 auto;height:auto;">
    <p style="margin-bottom:5px; text-align:center;">
        Percent Urbanization<br />
        <h12><strong><span id="slider3text">0</span></strong></h12>
    </p>
<div id="swift3Slider" class="orangeLeft" style="width:40%;margin: 0 auto;"></div>
</div>

<br/><br/><br/><br/>

<script type="text/javascript">
    //create sliders with one handle (value[0])
    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);
}))
d3.select("#swift2Slider").call(d3.slider().axis(true).value([0]).on("slide", function (evt, value) {
    var sliderVal2 = value.toFixed(2);
    d3.select('#slider2text').text(sliderVal2);
}))

  d3.select("#swift3Slider").call(d3.slider().axis(true).value([0]).on("slide",       function (evt, value) {
    var sliderVal3 = value.toFixed(2);
    d3.select('#slider3text').text(sliderVal3);
}))
</script>

感谢任何帮助。