javascript - 如何使用 d3 中的新数据动态更新滑块刻度？

Question

我有一个图表，它随着时间的推移用新数据更新。我想要一个时间滑块随时间更新。

因此，我希望滑块的右端为“当前时间”，滑块的左端为“初始时间”或“N 分钟后退”

因此，我希望更新刻度，例如，如果时间移动了 2 分钟，那么刻度可能会是（初始，1 分钟后，当前）。

同样，如果时间移动了 3 分钟，则刻度将是（初始，1 分钟后，2 分钟后，当前）。

我正在使用模板 d3 范围滑块，但我不知道要更新什么。

    var formatDateIntoYear = d3.timeFormat("%Y");
    var formatDate = d3.timeFormat("%b %Y");
    var parseDate = d3.timeParse("%m/%d/%y");

    var startDate = new Date("2004-11-01"),
        endDate = new Date("2017-04-01");

    var margin = {top:10, right:50, bottom:0, left:50},
    width_slider = 1000 - margin.left - margin.right,
    height_slider = 100 - margin.top - margin.bottom;

    ////////// slider //////////

    var moving = false;
    var currentValue = 0;
    var targetValue = width_slider;

    var playButton = d3.select("#play-button");

    var x = d3.scaleTime()
        .domain([startDate, endDate])
        .range([0, targetValue])
        .clamp(true);

    public_x = x;

    var svg = d3.select("#vis")
                .append("svg")
                .attr("id","timeline")
                .attr("width", width_slider + margin.left + margin.right)
                .attr("height", height_slider + margin.top + margin.bottom);

    var slider = svg.append("g")
        .attr("class", "slider")
        .attr("transform", "translate(" + margin.left + "," + height_slider/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;
              update(x.invert(currentValue)); // Update Function upon dragging
            })
        );

    slider.insert("g", ".track-overlay")
        .attr("class", "ticks")
        .attr("transform", "translate(0," + 18 + ")")
        .selectAll("text")
        .data(x.ticks(10))
        .enter()
        .append("text")
        .attr("x", x)
        .attr("y", 10)
        .attr("text-anchor", "middle")
        .text(function(d) {
            return formatDateIntoYear(d);
        });

    var handle = slider.insert("circle", ".track-overlay")
        .attr("class", "handle")
        .attr("r", 9);

    var label = slider.append("text")
        .attr("class", "label")
        .attr("text-anchor", "middle")
        .text(formatDate(startDate))
        .attr("transform", "translate(0," + (-25) + ")")

    function update(h) {
      // update position and text of label according to slider scale
      handle.attr("cx", x(h));
      label
        .attr("x", x(h))
        .text(formatDate(h));

      // filter data set and redraw plot

    }

    function step() {
      update(x.invert(currentValue));
      currentValue = currentValue + (targetValue/151);
      if (currentValue > targetValue) {
        moving = false;
        currentValue = 0;
        clearInterval(timer);
        // timer = 0;
        playButton.text("Play");
        console.log("Slider moving: " + moving);
      }
    }

标签： javascriptjqueryd3.js