d3.js - 轉換和轉換，多行

Question

我按照以下說明操作： http ： //bost.ocks.org/mike/path/ ，用單行創建和動畫單個圖形。

並且，弄清楚如何在圖形中創建多條線： 在D3.js中繪制多條線

主要問題：在我將新數據移入我的數據陣列后，我很難轉換多行。

我創建N行:(時間：紀元時間，前進步驟）

var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...],
                  [{time:1335972631000, value:45}, {time:1335972631500, value:13},...],
                  [{time:1335972631000, value:33}, {time:1335972631500, value:23},...}],
                  [...],[...],...
                  ];

var seriesColors = ['red', 'green', 'blue',...];

line = d3.svg.line()
        .interpolate(interpolation)
        .x(function(d) { return x(d.time); })
        .y(function(d) { return y(d.value); });

graphGroup.selectAll(".line")
        .data(seriesData)
            .enter().append("path")
            .attr("class", "line")
            .attr("d", line)
            .style('stroke', function(d, i) { return seriesColors[i]; })
            .style('stroke-width', 1)
            .style('fill', 'none');

我正在嘗試使用Javascript setInterval（...）更新N行，調用方法：

graph.selectAll("path")
    .data(seriesData)
    .attr("transform", "translate(" + x(1) + ")")
    .attr("d", line)
      .transition()
    .ease("linear")
    .duration(transitionDelay)
    .attr("transform", "translate(" + x(0) + ")");

它可以完美地繪制初始集，但是一旦我更新數據數組，行就會消失。

---

更新01

我意識到我在x中使用了紀元時間值（xAxis顯示日期：時間），因為如果我使用上面的說明性seriesData，我的示例可能會有效。

問題是“變換”，“翻譯”使用x（1），x（0）返回大數字，比我需要轉換的圖形大 。

我修改了更新 N行方法（上面）以使用手動方法：

新問題：現在圖表向左移動正確，但是行/圖表彈回到右側，每個setInterval更新都會執行。

它正確地推送/移動了seriesData數組，但是它不會向左滾動以顯示實際被繪制的新數據。

graph.selectAll("path")
        .data(seriesData)
        .attr("d", line)
        .attr("transform", null)
          .transition()
        .ease("linear")
        .duration(2000)
        .attr("transform", "translate(-200)");

我使用的另一個參考是： http ： //bl.ocks.org/1148374

有什么想法嗎？

Answer 1

作為錯誤可能性而跳出來的一件事是使用的數據調用，初始是

.data(seriesData)

更新使用

.data([seriesData])

這可能會導致問題，但如果沒有看到正在發生的其他事情很難說，你可以把它放在jsfiddle上嗎？