D3.js 在D3中使用X轴时间刻度时如何进行SVG转换

我试图从我的服务器上绘制简单的实时图形，为此我将d3与timeseries一起使用。 问题是我不能翻译（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();
    });

指定为[0，宽度]的日期范围内的x个值。与：

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

看起来您正试图在一天的距离内移动路径<代码>-3600*24不是日期，所以你得到的结果毫无意义

要找到一天的距离，您需要找到每天相隔两个日期之间的比例差：

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

---

在尝试做更多的事情之前，您可能还需要阅读javascript；我怀疑

新日期（数据[0]。年份）

不是您想要的。

谢谢，现在当我看到它时，它很明显，但我想不出来：）至于数据[0]。年份，nam是错误的，因为它实际上包含unix时间戳。