Fatal编程技术网

D3JavaScript条形图

javascript svg d3.js

D3JavaScript条形图,javascript,svg,d3.js,Javascript,Svg,D3.js,我正试图写一篇关于d3的教程，我发现有两个网站可以提供帮助，但没有足够的细节 我有以下输出条形图的代码： <html> <head> <div id="mainGraph"> </div> <script type="text/javascript" src="script.js"></script> </head> <body> <script type="text/javas

我正试图写一篇关于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>


var t=1，//开始时间（从历元开始的秒数）
v=0，//起始值（订阅者）
数据=d3.范围（33）.地图（下一个）；//启动数据集
函数next（）{
返回{
时间：++t，
值：v=~~Math.max（10，Math.min（80，v+3*（Math.random（）-.5））
};
}
setInterval（函数（）{
data.shift（）；
data.push（next（））；
}, 1500);
var w=40，
h=100；
var x=d3.scale.linear（）
.domain（[0，1]）
.范围（[0，w]）；
变量y=d3.scale.linear（）
.domain（[01100]）
.rangeRound（[0，h]）；
var图表=d3.选择（“主体”）
.append（“svg:svg”）
.attr（“类别”、“图表”）
.attr（“宽度”，w*data.length+10）
.attr（“高度”，h）；
图表。选择全部（“rect”）
.数据（数据）
.enter（）.append（“svg:rect”）
.attr（“x”，函数（d，i）{返回x（i）+5；}）
.attr（“y”，函数（d）{返回h-y（d.value）+5；}）
.attr（“宽度”，w）
.attr（“高度”，函数（d）{返回y（d.value）；}）；
chart.append（“svg:line”）
.attr（“x1”，0）
.attr（“x2”，w*数据长度）
.attr（“y1”，h+5）
.attr（“y2”，h+5）
.attr（“笔划”和“#000”）；
我现在面临的问题是，当我试图改变数据集时，我试图将v放入t的函数中，比如v=Math.exp（t） 这是不工作，它给了我一条黑线，即使我改变了最大和最小的间隔。 多谢各位

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

setInterval
使代码每1.5秒运行一次

   data.shift();
删除数组
数据
的第一个元素（用随机数填充）

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


总之，
data.push（next（））“< /COD>在数组的结尾插入一个新的随机值<数据> <代码> 
 < p>我建议您考虑在您的教程中传递固定数据，而不是使用数字生成器。更常见的是图表用户单独生成数据，然后将数据传递给制图工具。我总是觉得这样做是有用的。

常用的数据输入格式是使用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上有一个名为“”的工作示例

我想尝试的一件事是使用事件来控制一些事情，比如当我将鼠标移到图表右侧的文本图例上时，高亮显示图表中的特定条形图。如果您知道如何操作，请随时详细说明

我希望这有帮助


Frank
谢谢你的帮助回答，我还有一个问题，我正在尝试为v变量添加一个函数，每个示例我想将v设为v=Math.exp（t）。问题是，即使我更改了最大值和最小值的间隔，它也不起作用，但它只输出一行。

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"}];