D3 Examples - timeline-drag

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
​
    <style>
        body {
            font-family: "avenir next", Arial, sans-serif;
            font-size: 12px;
            color: #696969;
        }
​
        #play-button {
            position: absolute;
            top: 140px;
            left: 50px;
            background: #F14E58;
            padding-right: 26px;
            border-radius: 3px;
            border: none;
            color: white;
            margin: 0;
            padding: 0 12px;
            width: 60px;
            cursor: pointer;
            height: 30px;
        }
​
        #play-button:hover {
            background-color: #848480;
        }
​
        .ticks {
            font: 10px sans-serif;
        }
​
        .track,
        .track-inset,
        .track-overlay {
            stroke-linecap: round;
        }
​
        .track {
            stroke: #000;
            stroke-opacity: 0.3;
            stroke-width: 10px;
        }
​
        .track-inset {
            stroke: #ddd;
            stroke-width: 8px;
        }
​
        .track-overlay {
            pointer-events: stroke;
            stroke-width: 50px;
            stroke: transparent;
            cursor: crosshair;
        }
​
        .handle {
            fill: #fff;
            stroke: #000;
            stroke-opacity: 0.5;
            stroke-width: 1.25px;
        }
    </style>
</head>
​
<body>
    <div id="vis">
        <button id="play-button">Play</button>
    </div>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script>
        var margin = { top: 50, right: 50, bottom: 0, left: 50 },
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
​
        var svg = d3.select("#vis")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);
​
        const data = [9.5433, 4.5433, 4.5433, 6.0817, 8.7743, 10.6971, 22.2356, 34.5433, 37.2356, 37.6202, 37.2356, 35.6971, 34.5433, 38.3894, 43.3894, 47.6202, 52.2356, 55.3125, 59.1587, 59.9279, 58.3894, 56.851, 56.0817, 59.5433, 61.851, 64.9279, 67.6202, 69.9279, 69.9279, 68.004, 67.2356, 65.3125, 62.2356, 60.3125, 58.3894, 57.2356, 47.6202, 39.9279, 1.0817, 2.6202, 13.0048, 12.6202, 61.4663, 61.0817, 69.9279, 77.2356, 85.3125, 82.6202, 91.0817, 88.774, 77.6202, 66.0817, 64.5433, 54.5433, 45.3125, 46.4663, 49.9279, 40.6971, 37.6202, 36.0817, 35.3125, 39.5433, 38.774, 57.6202, 50.3125, 16.851, 17.6202, 18.774, 23.774, 58.774, 48.0048, 46.4663, 50.3125];
        ////////// slider //////////
​
        var moving = false;
        var currentValue = 0;
        var targetValue = width;
​
        var playButton = d3.select("#play-button");
​
        var x = d3.scaleLinear()
            .domain([0, data.length])
            .range([0, targetValue])
            .clamp(true);
        var y = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, height / 2]);
​
        var colour = d3.scaleLinear()
            //.domain(d3.extent(data, function (d) { return d }))
            .domain([0, 100])
            .range(["#b8ccf1", "#508cf3"]);
        var slider = svg.append("g")
            .attr("class", "slider")
            .attr("transform", "translate(" + margin.left + "," + height / 2 + ")");
​
        slider.append("line")
            .attr("class", "track")
            .attr("x1", x.range()[0])
            .attr("x2", x.range()[1])
            .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
            .attr("class", "track-inset")
            .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
            .attr("class", "track-overlay")
            .call(d3.drag()
                .on("start.interrupt", function () { slider.interrupt(); })
                .on("start drag", function () {
                    currentValue = d3.event.x;//捕获x值
                    console.log(currentValue);
                    update(x.invert(d3.event.x));
                }));
​
        slider.insert("g", ".track-overlay")
            .attr("class", "ticks")
            .attr("transform", "translate(0," + 24 + ")")
            .selectAll("text")
            .data(x.ticks(10))
            .enter().append("text")
            .attr("x", x)
            .attr("text-anchor", "middle")
            .text(function (d) { return "NO." + d; });//°
​
        var handle = slider.insert("circle", ".track-overlay")
            .attr("class", "handle")
            .attr("r", 12);
​
        ////////// plot //////////
        const barWidth = (width - 100) / data.length - 1;
        var plot = svg.append("g")
            .attr("class", "plot")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
        drawPlot(data);
        playButton
            .on("click", function () {
                var button = d3.select(this);
                if (button.text() == "Pause") {
                    moving = false;
                    clearInterval(timer);
                    // timer = 0;
                    button.text("Play");
                } else {
                    moving = true;
                    timer = setInterval(step, data.length);
                    button.text("Pause");
                }
                console.log("Slider moving: " + moving);//判定是否在运动
            })
​
        function step() {
            update(x.invert(currentValue));
            currentValue = currentValue + (targetValue / data.length);
            if (currentValue > targetValue) {
                moving = false;
                currentValue = 0;
                clearInterval(timer);
                // timer = 0;
                playButton.text("Play");
                // console.log("Slider moving: " + moving);
            }
        }
​
        function drawPlot(data) {
            var locations = plot.selectAll(".location")
                .data(data);
​
            locations.enter()
                .append("rect")
                .attr("width", barWidth)
                .attr("class", "location")
                .attr("transform", function (d, i) {
                    return "translate(" + x(i) + "," + height / 2 + ")";
                })
                .style("fill", function (d) { return colour(d) })
                // .style("stroke", function (d) { return "#000000" })
                .style("opacity", 1.0)
                .attr("height", function (d) {
                    return y(d)
                })
                .transition()
                .duration(400)
                .attr("height", 25)
                .transition()
                .attr("height", function (d) {
                    return y(d)
                });
​
            // if filtered dataset has less circles than already existing, remove excess
            locations.exit()
                .remove();
        }
​
        function trans() {
            slider.transition() // Gratuitous intro!
                .duration(750)
                .tween("hue", function () {
                    var i = d3.interpolate(0, 70);//色相的范围为0°~360°
                    return function (t) {
                        update(i(t));
                    };
                });
        }
        // trans();
​
        function update(h) {
            handle.attr("cx", x(h));
            // svg.style("background-color", d3.hsl(h, 0.8, 0.8));
            console.log(h)
            // filter data set and redraw plot
            var newData = data.filter(function (d, i) {
                return i < h;
            })
            drawPlot(newData);
        }
​
    </script>
</body>
​
</html>
    