javascript - D3 Javascript 条形图

标签 javascript svg d3.js

我正在尝试编写有关 d3 的教程,我发现有几个网站可以提供帮助,但没有足够的详细信息。

我有以下输出条形图的代码:

<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 置于 t 的函数中,例如 v = Math.exp (t) 这是行不通的,即使我更改了最大值和最小值的间隔,它也只给我一条黑线。 谢谢。

最佳答案

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

setInterval 使代码每 1.5 秒运行一次

   data.shift();

删除数组 data 的第一个元素(用随机数填充)

   data.push(next());

在数组末尾插入一个新的随机值。 next() 是一个生成随机数的函数。

因此,总而言之,data.push(next()); 在数组 data 的末尾插入了一个新的随机值

关于javascript - D3 Javascript 条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8347421/

相关文章:

javascript - 如何在输入地址时发送新的地理定位请求并刷新 Google map ?

javascript - Uncaught TypeError : $(. ..).value is not a function when trying to send a value via JQuery

javascript - Firefox svg 渲染 : how to get real g position?

svg - 如何将 SVG 元素设置为我的页面的收藏夹图标?

javascript - D3 v4 - 获取当前缩放比例?

javascript - 停止穿过 map 的 d3 路径

javascript - 如何从 firebase 数据库读取 UID

javascript - 尝试使用 jQuery 的 get 方法填充 html 选项列表

javascript - snap.svg 在圆圈中移动对象

javascript - 如何更改 map 上的省份名称?