Question

我正在尝试编写一个关于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）这是行不通的，它只给我一条黑线，即使我改变了最大和最小的间隔。谢谢。

Answer 1

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

setInterval使代码每1.5秒运行一次

   data.shift();

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

   data.push(next());

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

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

Answer 2

我建议您考虑为您的教程传递固定数据，而不是使用数字生成器。图表用户分别生成数据，然后将数据传递给图表工具更为常见。我总觉得这样做很有用。

常见的数据输入格式是使用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上有一个名为＆＃34; Multiple Vertical Bar Charts Mixed In With Common HTML Layout Constructs的工作示例。＆＃34;

我想尝试上班的一件事是使用事件来控制图表中突出显示特定条形图的内容，因为我将文本图例鼠标悬停在图表右侧。如果您知道如何操作，请随时详细说明。

我希望这会有所帮助。

谢

D3 Javascript条形图

2 个答案: