在D3中使用x轴上的时间尺度时如何进行SVG翻译

Question

我试图从我的服务器做简单的实时图形，为此我使用d3与时间序列。问题是我不能做translate(x(-1000))，因为x()期望一个日期，如何克服这个问题并使翻译工作?下面是代码:

    var data = [];
    var curDate = new Date();
    var df = d3.time.format.utc('%Y-%m-%d');
    var margin = {top: 6, right: 0, bottom: 6, left: 40},
    width = 960 - margin.right,
    height = 240 - margin.top - margin.bottom;
    var svg = d3.select("body").append("p").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .style("margin-left", -margin.left + "px")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    function draw() {
        var x = d3.time.scale.utc().domain([new Date(data[0].year), new Date(data[data.length-1].year)]).range([0, width]);
        var y = d3.scale.linear().domain([0, 5]).rangeRound([0, height]);
        var line = d3.svg.line()
        .interpolate('basis')
        .x(function(d, i) { return x(d.year); })
        .y(function(d) { return y(d.books);});
        svg.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

        var path = svg
        .append("g")
        .attr("clip-path", "url(#clip)")
        .append('path')
        .data([data])
        .attr('class', 'line')
        .attr('d', line);
        tick(path, svg, line, x);
    }
    var data = [];
    var curDate = new Date();
    var df = d3.time.format.utc('%Y-%m-%d');
    var margin = {top: 6, right: 0, bottom: 6, left: 40},
    width = 960 - margin.right,
    height = 240 - margin.top - margin.bottom;
    var svg = d3.select("body").append("p").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .style("margin-left", -margin.left + "px")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    function draw() {
        var x = d3.time.scale.utc().domain([new Date(data[0].year), new Date(data[data.length-1].year)]).range([0, width]);
        var y = d3.scale.linear().domain([0, 5]).rangeRound([0, height]);
        var line = d3.svg.line()
        .interpolate('basis')
        .x(function(d, i) { return x(d.year); })
        .y(function(d) { return y(d.books);});
        svg.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

        var path = svg
        .append("g")
        .attr("clip-path", "url(#clip)")
        .append('path')
        .data([data])
        .attr('class', 'line')
        .attr('d', line);
        tick(path, svg, line, x);
    }
    function tick(path, svg, line, x) {
        data.push({year: new Date(data[data.length-1].year.getTime() + 2000), books: 5*Math.random()});
        path
        .attr('d', line)
        .attr('transform', null)
        .transition()
        .duration(2000)
        .ease('linear')
        .attr('transform', 'translate(' + x(-3600*24) + ')')
        .each('end', function() { tick(path, svg, line, x); });
        data.shift();
    }
    d3.text('server.' + df(new Date()) + '.txt', 'text/plain', function(text) {
        var lines = text.split("n");
        for (var i in lines) {
            if (lines[i].trim().length == 0) continue;
            var lineData = lines[i].split(' ');
            data.push({year: new Date(parseInt(lineData[0])), books: parseFloat(lineData[1])});
        }
        draw();
    });

Answer 1

x将指定日期范围内的值映射到[0,width]。:

path
    .attr('transform', 'translate(' + x(-3600*24) + ')')

看起来你在尝试移动一天的距离。-3600*24不是一个日期，所以你得到的是无意义的结果。

要计算一天的距离，你需要计算相隔一天的两个日期之间的比例差:

x(new Date(0)) - x(new Date(24*3600*1000))

在尝试做更多事情之前，你可能还想阅读javascript中的date对象;我怀疑new Date(data[0].year)不是你想要的。