D3 Javascript繪圖功能

我想寫一個關於D3的教程，我發現了幾個網站，可以幫助，但沒有足夠的細節。D3 Javascript繪圖功能

我有以下代碼輸出的條形圖：

<html> 
<head> 
<div id="mainGraph"> 
     </div> 
<script type="text/javascript" src="script.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 

var t = 1, // start time (seconds since epoch) 
    v = 0, // start value (subscribers) 
    data = d3.range(33).map(next); // starting dataset 

function next() { 
    return { 
    time: ++t, 
    value: v = ~~Math.max(10, Math.min(80, Math.exp(t))) 
    }; 
} 
setInterval(function() { 
    data.shift(); 
    data.push(next()); 
}, 1500); 

    var w = 40, 
     h = 100; 

    var x = d3.scale.linear() 
     .domain([0, 1]) 
     .range([0, w]); 

    var y = d3.scale.linear() 
     .domain([0, 100]) 
    .rangeRound([0, h]); 

    var chart = d3.select("body") 
    .append("svg:svg") 
    .attr("class", "chart") 
    .attr("width", w * data.length + 10) 
    .attr("height", h); 

    chart.selectAll("rect") 
    .data(data) 
    .enter().append("svg:rect") 
    .attr("x", function(d, i) { return x(i) + 5; }) 
    .attr("y", function(d) { return h - y(d.value) + 5; }) 
    .attr("width", w) 
    .attr("height", function(d) { return y(d.value); }); 

    chart.append("svg:line") 
    .attr("x1", 0) 
    .attr("x2", w * data.length) 
    .attr("y1", h + 5) 
    .attr("y2", h + 5) 
    .attr("stroke", "#000"); 





    </script>   
    </body> 
    </html>

第一個問題是什麼呢函數（）

第二個問題是，當我試圖改變該組數據，所以我我試圖把V的功能像V = Math.exp（t）這不工作，它只給我一條黑線，即使我改變了最大值和最小值的間隔。謝謝。

來源

2011-12-05 Ali Kabalan

回答了你的第一個問題，你能爲你的第二個問題設置一個jsfiddle例子嗎？ –

@DominicGoulet這是我試圖用這個代碼繪製函數的例子。可能我沒有得到你想要設置一個jsfiddle例子的意思。 –

轉到http://jsfiddle.net並設置不適合您的示例。然後，在這裏發佈jsfiddle鏈接，以便我們可以分叉代碼並使其工作。 –

function()爲：

setInterval(function() { ... });

被稱爲lambda函數（或anonymus如果您願意）。這意味着該函數沒有名字，不能在其作用域之外調用。在這種情況下，setInterval函數需要一個函數作爲參數，所以我們發送全功能定義，而不僅僅是對它的引用。

來源

2011-12-05 15:13:29

D3 Javascript繪圖功能

回答

相關問題