Слайдер D3 с порядковыми значениями застревает на отметке 8 - PullRequest
Новая
       2

Слайдер D3 с порядковыми значениями застревает на отметке 8

0 голосов
/ 12 ноября 2018

Я пытаюсь реализовать ползунок 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 шкалы. Я пробовал несколько комбинаций, но не смог определить оптимальные настройки.

1 Ответ

0 голосов
/ 12 ноября 2018

В d3-слайдере есть ошибка, если остановки могут быть проиндексированы (строки) (строка [281]). 

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

Эта строка предназначена для предотвращения того, чтобы ползунки диапазона value[0] были больше, чем value[1]. Для ползунков вне диапазона со строковыми галочками это зависит от того, какая строка является текущим значением.

Если строка 20:00, условие истинно, поэтому анимация / позиционирование ползунка отсутствуют.

Измените строку на 

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

, чтобы сделать тест действительным только для ползунков.

...