重畫一個簡單的圖

Question

我有一個非常簡單的線圖，由下面的代碼呈現。我創建了一個簡單的計時器，將項目推入數據數組，然後重繪圖形。問題是圖形沒有被重繪。我可以看到，按預期每1.5秒調用一次函數，但該圖只是不重繪。

我已經嘗試了很多不同的事情，並試圖按照類似於此的前面的問題的一些答案，但我只是卡住了。

var data = getData(); 
    var graph; 
    var line; 

    function getData() { 
     var arr = []; 
     for (var x = 0; x < 30; x++) { 
      arr.push(rand(100)); 
     } 
     return arr; 
    } 

    function rand(max) { 
     return Math.floor(Math.random() * (max + 1)) 
    } 

    setInterval(function() { 
     data.shift(); 
     data.push(rand(100)); 
     redraw(); 
    }, 1500); 

    function redraw() { 
     graph.select("svg path") 
      .data([data]) 
      .attr("d", line); 
    } 

    var m = [80, 80, 80, 80]; // margins 
    var w = 1000 - m[1] - m[3]; // width 
    var h = 400 - m[0] - m[2]; // height 

    var x = d3.scale.linear().domain([0, data.length]).range([0, w]); 
    var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]); 

    line = d3.svg.line() 
      .x(function(d,i) { return x(i); }) 
      .y(function(d) { return y(d); }) 

    graph = d3.select("#graph").append("svg:svg") 
       .attr("width", w + m[1] + m[3]) 
       .attr("height", h + m[0] + m[2]) 
       .append("svg:g") 
       .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 

    var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true); 
    graph.append("svg:g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + h + ")") 
      .call(xAxis); 


    var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left"); 
    graph.append("svg:g") 
      .attr("class", "y axis") 
      .attr("transform", "translate(-25,0)") 
      .call(yAxisLeft); 

    graph.append("svg:path") 
     .data([data])   
     .attr("d", line); 

Answer 1

的問題是，你的選擇「SVG路徑」是不夠具體：它通過你的軸畫域路徑相匹配。您可以通過以下兩種方式之一來解決該問題。您可以保存到線路路徑的參考，當你添加：

var path = graph.append("path") 
    .datum(data) 
    .attr("d", line); 

或者你可以爲其分配一個特定的類（「線」），然後使用一個更具體的選擇（「.line區段」）。這也會讓風格變得更容易。

graph.append("path") 
    .datum(data) 
    .attr("class", "line") 
    .attr("d", line);