Question

我正在尝试用每个刻度线的序号实现D3滑块。
我使用了以下滑块实现：
https://github.com/MasterMaps/d3-slider
https://codepen.io/DougManuel/full/avRyMg

这是我的.js（myslider.js）代码和滑块实现：

var data2 = ['18:00','18:15','18:30','18:45','19:00','19:15','19:30','19:45','20:00','20:15','20:30','20:45','21:00','21:15','21:30','21:45','22:00','22:15','22:30','22:45'];
var w = window.innerWidth || document.body.clientWidth,
h = 700;  

drawSlider();  

function drawSlider() {  
    svg = d3.select("body").append("svg:svg")  
        .attr("width", w)
        .attr("height", h);

    svg.append('text')
        .attr('class','timeband')
        .attr("x", w/2)
        .attr("y", h/2)
        .attr('text-anchor','middle')
        .attr('font-family','sans-serif')
        .attr('font-weight','bold')
        .attr('font-size','50px')
        .attr('fill','black')
        .text(data2[0]);

    d3.select('#slider2').call(
        d3.slider()
            .scale(d3.scale.ordinal().domain(data2).rangePoints([0, 1],0.5))
            .axis(d3.svg.axis())
            .snap(true)
            .value(data2[0])
            .on("slideend", function(evt, value) {       
                svg.selectAll("text.timeband")              
                    .text(value)                
            })
    );
}

这是我的html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="slider2" style="margin-bottom:30px;"></div>
    <script src="d3/d3.js"></script> <!--D3 Version 3--> 
    <script type="text/javascript" src="d3/slider.js"></script> 
    <!--<script type="text/javascript" src="https://github.com/MasterMaps/d3-slider/blob/master/d3.slider.js"></script>-->
    <link rel="stylesheet" href="css/d3.slider.css" /> 
    <!--<link rel="stylesheet" href="https://github.com/MasterMaps/d3-slider/blob/master/d3.slider.css"/>-->
    <script type="text/javascript" src="js/myslider.js"></script>    
</body>

我的滑块没有移过第8个刻度，值为'19：45'。我认为这取决于刻度的rangePoints函数的配置。我尝试了多种组合，但无法找出最佳设置。

Answer 1

如果可以索引停靠点（字符串）（第[281]行），则d3-slider中存在错误。

if ( value[ 0 ] >= value[ 1 ] ) return;

该行用于防止范围滑块value[0]大于value[1]。对于带有字符串刻度的非范围滑块，这取决于当前值是什么字符串。

如果字符串为20:00，则条件为true，因此滑块没有动画/位置。

将行更改为

if (toType(value) == "array" && value.length == 2 && value[ 0 ] >= value[ 1 ] ) return;

使测试仅对范围滑块有效。

具有序数值的D3滑块卡在第8个刻度上

1 个答案: