直方图带有来自csv的值 [英] Histogram with values from csv

问题描述

我试图创建一个简单的直方图，其值存储在csv中（我将在整个时间内进行修改）。

我现在使用的代码是：（编辑的代码！）

  var values = [] 
 
 d3.csv（'.. /static/CSV/Chart_data/histogram_sub.csv?rnd='+(new Date）.getTime（），function（data）{
 
 values = Object.keys（data）.map（function（ k）{return data [k] ['Calculus I']}）; 
 
 var color =steelblue; 
 
 //使用正态分布生成1000个数据点平均值= 20，偏差= 5 
 
 //计数格式化程序
 var formatCount = d3.format（，。0f）; 
 
 var margin = {top：20，right：30，bottom：30，left：30}，
 width = 800  -  margin.left  -  margin.right，
 height = 400  -  margin.top  -  margin。底部; 
 
 var max = d3.max（values）; 
 var min = d3.min（values）; 
 var x = d3.scale.linear（）
 .domain（[min，max]）
 .range（[0，width]）; 
 
 //使用二十个均匀间隔的单元生成直方图。 
 var data = d3.layout.histogram（）
 .bins（x.ticks（20））
（values）; 
 
 var yMax = d3.max（data，function（d）{return d.length}）; 
 var yMin = d3.min（data，function（d）{return d.length}）; 
 var colorScale = d3.scale.linear（）
 .domain（[yMin，yMax]）
 .range（[d3.rgb（color）.brighter（），d3.rgb（色）.darker（）]）; 
 
 var y = d3.scale.linear（）
 .domain（[0，yMax]）
 .range（[height，0]）; 
 
 var xAxis = d3.svg.axis（）
 .scale（x）
 .orient（bottom）; 
 
 var svg = d3.select（＃Histogram2）。append（svg）
 .attr（width，width + margin.left + margin.right）
 .attr（height，height + margin.top + margin.bottom）
 .append（g）
 .attr（transform，translate（+ margin.left + ，+ margin.top +））; 
 
 var bar = svg.selectAll（.bar）
 .data（data）
 .enter（）。append（g）
 .attr （class，bar）
 .attr（transform，function（d）{returntranslate（+ x（dx）+，+ y（dy）+）;} ）; 
 
 bar.append（rect）
 .attr（x，1）
 .attr（width，（x（data [0] .dx）函数（d）{返回高度 -  y（dy）;}）
 .attr（fill，function（d） {return colorScale（dy）}）; 
 
 bar.append（text）
 .attr（dy，.75em）
 .attr（y，-12）
 .attr（x，（x（data [0] .dx） -  x（0））/ 2）
 .attr（text-anchor，middle）
 .text函数（d）{return formatCount（dy）;}）; 
 
 svg.append（g）
 .attr（class，x axis）
 .attr（transform，translate（0，+高度+））
 .call（xAxis）; 
}）; 
  

我的csv文件如下所示：

 微积分I 
 5.0 
 5.1 
 5.7 
 ... 
  

我发现我认为引用data [0]的错误：

未捕获TypeError：无法读取属性'dx'未定义

任何帮助？提前感谢！

解决方案

这是一个使用 d3.csv 的plunkr和从文件中提取数据：

http ：//plnkr.co/edit/2xCvrwiXWzrS6gtbmIU7？p =预览

请通过 docs for d3.csv


使用相同的，这里是对代码的相关修改： li>在内容中添加一个新文件 test.csv 。


使用 d3.csv ：

  d3.csv（test.csv，parse，function（error ，data）{
 console.log（data）; 
}）; 
  

您看到的 parse 上面是一个访问函数，它接收来自csv的每一行，并使用它来分析整数值。

  function parse（row）{
 row ['Calculus I'] = + row ['Calculus I']; 
返回行; 
} 
  

而且假设值为整数数组，我使用 map

  values = data.map （函数（d）{return d ['Calculus I'];}）; 
  

希望这有帮助。

I am trying to create a simple histogram with values stored in a csv (that I will be modifying through the time).

The code I am using now is: (edited code!)

               var values = []

                d3.csv('../static/CSV/Chart_data/histogram_sub.csv?rnd='+(new Date).getTime(),function(data){

                    values = Object.keys(data).map(function(k){ return data[k]['Calculus I']});

                    var color = "steelblue";

                    // Generate a 1000 data points using normal distribution with mean=20, deviation=5

                    // A formatter for counts.
                    var formatCount = d3.format(",.0f");

                    var margin = {top: 20, right: 30, bottom: 30, left: 30},
                        width = 800 - margin.left - margin.right,
                        height = 400 - margin.top - margin.bottom;

                    var max = d3.max(values);
                    var min = d3.min(values);
                    var x = d3.scale.linear()
                          .domain([min, max])
                          .range([0, width]);

                    // Generate a histogram using twenty uniformly-spaced bins.
                    var data = d3.layout.histogram()
                        .bins(x.ticks(20))
                        (values);

                    var yMax = d3.max(data, function(d){return d.length});
                    var yMin = d3.min(data, function(d){return d.length});
                    var colorScale = d3.scale.linear()
                                .domain([yMin, yMax])
                                .range([d3.rgb(color).brighter(), d3.rgb(color).darker()]);

                    var y = d3.scale.linear()
                        .domain([0, yMax])
                        .range([height, 0]);

                    var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom");

                    var svg = d3.select("#Histogram2").append("svg")
                        .attr("width", width + margin.left + margin.right)
                        .attr("height", height + margin.top + margin.bottom)
                      .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                    var bar = svg.selectAll(".bar")
                        .data(data)
                      .enter().append("g")
                        .attr("class", "bar")
                        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

                    bar.append("rect")
                        .attr("x", 1)
                        .attr("width", (x(data[0].dx) - x(0)) - 1)
                        .attr("height", function(d) { return height - y(d.y); })
                        .attr("fill", function(d) { return colorScale(d.y) });

                    bar.append("text")
                        .attr("dy", ".75em")
                        .attr("y", -12)
                        .attr("x", (x(data[0].dx) - x(0)) / 2)
                        .attr("text-anchor", "middle")
                        .text(function(d) { return formatCount(d.y); });

                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis);
                });

And my csv file looks like this:

Calculus I
5.0
5.1
5.7
...

And I am getting errors that I think refer to data[0]:

Uncaught TypeError: Cannot read property 'dx' of undefined

Any help? Thanks in advance!

解决方案

Here's a plunkr using d3.csv and fetching data from the file:

http://plnkr.co/edit/2xCvrwiXWzrS6gtbmIU7?p=preview

And please go through the docs for d3.csv

Using the same, here are the relevant changes to the code:

1. Added a new file test.csv with the content.

2. Fetched the file using d3.csv:

   d3.csv("test.csv", parse, function(error, data) { 
      console.log(data);
   });
   

3. The parse that you see above is a accessor function that receives every row from the csv and I'm using it to parse the integer value.

   function parse(row) {
     row['Calculus I'] = +row['Calculus I'];
     return row;
   }
   

4. And as you were assuming values to be array of integers, I'm mapping the fetched data in the same format as desired using map

   values = data.map(function(d) { return d['Calculus I']; });
   

Hope this helps.

这篇关于直方图带有来自csv的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！