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, v + 3 *(Math.random() - .5)) 
    }; 
} 
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 IN的T功能改變的數據集像v = Math.exp（t）這不工作，它只給我一條黑線，即使我改變了最大和最小的時間間隔。謝謝。

來源

2011-12-01 Ali Kabalan

setInterval(function() { 
    data.shift(); 
    data.push(next()); 
}, 1500);

setInterval使運行該代碼每1.5秒

data.shift();

移除陣列data的

data.push(next());

插入在一個新的隨機值的第一個元素（其填充有隨機數）數組的末尾。 next()是生成隨機數的函數。

因此，簡言之，data.push(next());在陣列data結束

來源

2011-12-01 23:59:16 Duopixel

感謝您有用的答案，我仍然有一個問題我想一個函數添加到每個例子中，我希望把V作爲訴變量v = Math.exp（T）事情是即使我改變了最大值和最小值的間隔，但它只輸出一行，它仍然不能工作。 –

我建議您考慮在固定數據傳遞你的教程，而不是使用一個號碼發生器插入一個新的隨機值。圖表用戶單獨生成數據更常見，然後將數據傳遞給製圖工具。我總是覺得這樣做很有用。

常見的數據輸入格式是使用解析後D3.csv字符串格式...

var dataSet1 = [ 
    {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"}, 
    {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"}, 
    {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"}, 
    {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"}, 
    {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"}, 
    {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"}, 
    {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

我呼籲在github工作示例「Multiple Vertical Bar Charts Mixed In With Common HTML Layout Constructs。」

我想嘗試使用的一件事是使用事件來控制事件，如突出顯示圖表中特定的條形，並將鼠標懸停在圖形右側的文本圖例上。如果您知道如何操作，請隨時詳細說明。

我希望這會有所幫助。

弗蘭克

來源

2012-03-27 02:15:58

D3 Javascript條形圖

回答

相關問題