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条形图

回答

相关问题