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

我遵循以下指令：http://bost.ocks.org/mike/path/用於創建和動畫單行單個圖形。d3.js - 轉換和轉換，多行

而且，想出如何在圖形中創建多個行：Drawing Multiple Lines in D3.js

主要問題：我有一個很難轉換多行後，我轉向&推入新的數據到我的數據陣列。

我創建ñ線有：（時間：劃時代的時間，大踏步地前進）

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（... ）使用以下方法調用方法：

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

它可以完美地繪製初始集，但只要我upd吃了數據數組，線條就消失了。

UPDATE 01

我意識到，我在X（X軸顯示日期：時間）採用劃時代的時間值作爲我的例子，如果我用上面的說明性seriesData可能會工作。

問題是「轉換」，「翻譯」使用x（1），x（0）返回的是巨大的數字，比我需要轉換的圖表大大。

我修改更新Ñ線路的方法（上文）使用手動方法：

新問題： 現在圖表向左移動正確，但線/曲線圖啪啪回到右邊，執行每個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

有什麼想法？即跳出我爲錯誤的可能性

來源

2012-05-01 August

我開始認爲這與我使用d3.time.scale（）...爲x與d3.scale.linear（）...有關？ – August

你有沒有解決過這個問題？如果有，請發佈您的解決方案。 –

我最終制作了三個獨立的圖，每個圖都有一行。然後我使用CSS將圖形ID堆疊在一起。管理和重用更容易。特別是如果我想讓它流暢。 – August

的一件事是所使用的數據呼叫，最初是

.data(seriesData)

更新使用

.data([seriesData])

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

來源

2012-05-01 22:06:31 Josh

出色的觀察，但它不能解決更新問題。 – August

[數據]來自這個例子：http://bl.ocks.org/1148374 – August

所以我認爲這意味着當改變第二次數據調用來匹配第一次，沒有什麼改變？ - 當然有些情況下你想要將所有數據作爲單個元素數組傳遞，但從我所知道的情況來看，這似乎不是其中之一。如果沒有看到更多的代碼，恐怕我不能再幫忙了。 – Josh

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

回答

相關問題