D3更新圖表

真的在這個問題上困擾了好幾天。我正在嘗試更新我的d3圖表以顯示在計算器上運行函數需要多長時間。隨着我得到的信息，我會顯示所需的時間，並將其顯示在我以前繪製的圖表上。我現在的問題是我無法獲得更新的圖表。D3更新圖表

代碼的圖形：

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
     width = 400 - margin.left - margin.right, 
     height = 300 - margin.top - margin.bottom; 


    var x = d3.scale.linear() 
     .range([0, width]) 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    var line = d3.svg.line() 
     .x(function(d) { return x(d.date); }) 
     .y(function(d) { return y(d.close); }); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     var data = dataone.map(function(d) { 
      return { 
      date:d[0], 
      close: d[1] 
      }; 

     }); 

    console.log(data); 


    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain(d3.extent(data, function(d) { return d.close; })); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Price ($)"); 

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

代碼陣列的更新功能和更新：

function updateArray(){ 
    dataone.push(clickss-0.5,clickss); 
    updateData(); 
} 
function updateData() { 

var data = dataone.map(function(d) { 
     return { 
     date:d[0], 
     close: d[1] 
     }; 
    }); 
    // Scale the range of the data again 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([0, d3.max(data, function(d) { return d.close; })]); 

// Select the section we want to apply our changes to 
var svg = d3.select("body").transition(); 

// Make the changes 
    svg.select(".line") // change the line 
     .duration(750) 
     .attr("d", valueline(data)); 
    svg.select(".x.axis") // change the x axis 
     .duration(750) 
     .call(xAxis); 
    svg.select(".y.axis") // change the y axis 
     .duration(750) 
     .call(yAxis);

}

請我如何能得到這個工作的建議。我看了不少，現在一些導遊，但

來源

2015-11-01 Bock Yang

兩件事情：

1）在你的更新功能，您的線發生器功能line不valueline。

2.）通過查看您的存取功能，我不認爲你的意思是dataone.push(clickss-0.5,clickss);，而是dataone.push([clickss-0.5,clickss]);。你需要一個數組數組。

此外，您不需要將dataone陣列映射到另一個結構。只要改變你的訪問者：

x.domain(d3.extent(data, function(d) { 
    return d[0]; 
})); 
y.domain(d3.extent(data, function(d) { 
    return d[1]; 
})); 
... 
var line = d3.svg.line() 
    .x(function(d) { 
    return x(d[0]); 
    }) 
    .y(function(d) { 
    return y(d[1]); 
    });

這裏是你的代碼工作，並清理了一下：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    
 
    var dataone = []; 
 
    for (var i = 0; i < 10; i++){ 
 
     dataone.push([i,Math.random()]); 
 
    } 
 

 
    var margin = { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 30, 
 
     left: 50 
 
     }, 
 
     width = 400 - margin.left - margin.right, 
 
     height = 300 - margin.top - margin.bottom; 
 

 

 
    var x = d3.scale.linear() 
 
     .range([0, width]) 
 

 
    var y = d3.scale.linear() 
 
     .range([height, 0]); 
 

 
    var xAxis = d3.svg.axis() 
 
     .scale(x) 
 
     .orient("bottom"); 
 

 
    var yAxis = d3.svg.axis() 
 
     .scale(y) 
 
     .orient("left"); 
 

 
    var line = d3.svg.line() 
 
     .x(function(d) { 
 
     return x(d[0]); 
 
     }) 
 
     .y(function(d) { 
 
     return y(d[1]); 
 
     }); 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width + margin.left + margin.right) 
 
     .attr("height", height + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    // Scale the range of the data again 
 
    x.domain(d3.extent(dataone, function(d) { 
 
     return d[0]; 
 
    })); 
 
    y.domain([0, d3.max(dataone, function(d) { 
 
     return d[1]; 
 
    })]); 
 

 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis); 
 

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis) 
 
     .append("text") 
 
     .attr("transform", "rotate(-90)") 
 
     .attr("y", 6) 
 
     .attr("dy", ".71em") 
 
     .style("text-anchor", "end") 
 
     .text("Price ($)"); 
 

 
    svg.append("path") 
 
     .datum(dataone) 
 
     .attr("class", "line") 
 
     .attr("d", line) 
 
     .style("fill","none") 
 
     .style("stroke","steelblue"); 
 

 
     
 
    function updateData() { 
 

 
     // Scale the range of the data again 
 
     x.domain(d3.extent(dataone, function(d) { 
 
     return d[0]; 
 
     })); 
 
     y.domain([0, d3.max(dataone, function(d) { 
 
     return d[1]; 
 
     })]); 
 

 
     // Select the section we want to apply our changes to 
 
     var svg = d3.select("body").transition(); 
 

 
     // Make the changes 
 
     svg.select(".line") // change the line 
 
     .duration(750) 
 
     .attr("d", line(dataone)); 
 
     svg.select(".x.axis") // change the x axis 
 
     .duration(750) 
 
     .call(xAxis); 
 
     svg.select(".y.axis") // change the y axis 
 
     .duration(750) 
 
     .call(yAxis); 
 
    } 
 
    
 
    setInterval(function(){ 
 
     for (var i = 0; i < 5; i++){ 
 
     dataone.push([dataone.length + i, Math.random()]); 
 
     } 
 
     updateData(); 
 
    },1000); 
 
    
 
    </script> 
 
</body> 
 

 
</html>

來源

2015-11-01 14:11:08 Mark

這dataone.push線固定它真正的好。謝啦。一直堅持這個爲永久。 –

回答

相關問題