javascript 绘制来自 csv 文件的数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18346496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
graph the data from a csv file
提问by Brad
This page needs to display a graph that reads the data from a CSV file.
此页面需要显示从 CSV 文件中读取数据的图表。
I have been following a tutorial on TheCodingTutorials.
我一直在关注TheCodingTutorials的教程。
I'm also trying to follow the Multi-Column Datatutorial so that i can add the name to the graph. This is where i'm getting lost, the tutorial make it sound easy but i just don't get it. Every time i try to edit the code it errors out.
我也在尝试遵循多列数据教程，以便我可以将名称添加到图表中。这是我迷路的地方，教程让它听起来很简单，但我就是不明白。每次我尝试编辑代码时都会出错。
It works perfectly if you only want to read a single column csv file.
如果您只想读取单列 csv 文件，它可以完美运行。
However I want to read a multiple columns csv file.
但是我想读取多列 csv 文件。
Also if there is something that could make it better please let me know.
另外，如果有什么可以使它变得更好的，请告诉我。
<html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
<html>
<head>
<meta http-equiv="Expires" content="-1">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
{
d3.text("data2.csv", function(unparsedData)
{
var data = d3.csv.parseRows(unparsedData);
//Create the SVG graph.
var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");
var dataEnter = svg.selectAll("rect").data(data).enter();
var graphHeight = 450;
var barWidth = 20;
var barSeparation = 10;
var maxData = 105;
var horizontalBarDistance = barWidth + barSeparation;
var textYOffset = horizontalBarDistance / 2 - 12;
var textXOffset = 20;
var barHeightMultiplier = graphHeight / maxData;
//Draw the bars.
dataEnter.append("rect").attr("y", function(d, i)
{
return i * horizontalBarDistance;
}).attr("x", function(d)
{
return 100;
}).attr("height", function(d)
{
return barWidth;
}).attr("width", function(d)
{
return d * barHeightMultiplier;
});
//Draw the text.
dataEnter.append("text").text(function(d)
{
return d;
}).attr("y", function(d, i)
{
return i * horizontalBarDistance + textXOffset;
}).attr("x");
});
};
}
</script>
</head>
<body onLoad="JavaScript:timedRefresh(10000);">
</body>
</html>
My CSV file now looks like this
我的 CSV 文件现在看起来像这样
names,data
john,78
brad,105
amber,103
james,2
dean,74
pat,45
matt,6
andrew,18
ashley,15
==================================================================================
================================================== ================================
UPDATE
更新
==================================================================================
================================================== ================================
Thanks to all your help this is my updated code.
感谢您的帮助，这是我更新的代码。
<html>
<head>
<meta http-equiv="Expires" content="-1">
<script type="text/javascript" src=".\JavaScripts\d3.v3.min.js"></script>
<script type="text/javascript">setTimeout(function(){window.location.href='index2.html'},120000);
d3.csv("./data/data.csv", function(data){
//Create the SVG graph.
var svg = d3.select("#graph").append("svg").attr("width", "1800").attr("height", "600");
var dataEnter = svg.selectAll("rect").data(data).enter();
var graphWidth = 800;
var barWidth = 40;
var barSeparation = 30;
var maxData = 2;
var horizontalBarDistance = barWidth + barSeparation;
var textYOffset = 25;
var barXOffset = 260;
var barYOffset = 5;
var numXOffset = 230;
var barHeightMultiplier = graphWidth / maxData;
var fontSize = "30px";
var color = d3.scale.category10();
//Draw the bars.
dataEnter.append("rect")
.attr("fill",function(d,i){return color(i);})
.attr("y", function(d, i){return i * horizontalBarDistance - barYOffset;})
.attr("x", barXOffset)
.attr("height", function(d){return barWidth;})
.attr("width", function(d){return d.data * barHeightMultiplier;});
//Draw the text.
dataEnter.append("text")
.text(function(d){return d.Name;})
.attr("font-size", fontSize)
.attr("font-family", "sans-serif")
.attr("y", function(d, i){return i * horizontalBarDistance + textYOffset;})
.attr("x");
//Draw the numbers.
dataEnter.append("text")
.text(function(d){return d.data;})
.attr("font-size", fontSize)
.attr("font-family", "sans-serif")
.attr("y", function(d, i){return i * horizontalBarDistance + textYOffset;})
.attr("x", numXOffset);
//Draw the Target bar
dataEnter.append("rect")
.attr("fill", "red")
.attr("y", function(d, i){return i * horizontalBarDistance;})
.attr("x", barXOffset + graphWidth)
.attr("height", 70)
.attr("width", 10);
});
</script>
<style type="text/css">
#title {
font-family:sans-serif;
font-size: 50px;
color:#000;
text-decoration: underline;
text-align: center;
width: 100%;
position:relative;
margin-top:20;
}
#graph {
overflow:hidden;
margin-top:40;
}
</style>
</head>
<body>
<div id="title">Graph 1</div>
<div id="graph"></div>
</body>
</html>
采纳答案by Scott Cameron
Because your data contains a header row as its first row, you should be using d3.csv.parseinstead of d3.csv.parseRows. The CSV documentationexplains the differences.
因为您的数据包含一个标题行作为其第一行，所以您应该使用d3.csv.parse代替d3.csv.parseRows。该CSV文件说明两者的差异。
The result of parsing will be something that looks like this:
解析的结果将是这样的：
[
{"names": "john", "data": 78},
{"names": "brad", "data": 105},
...
]
So, when you use this data to create your rectelements, you get an object bound to each rect. Then when you use selection.attror selection.stylethe dvalue you are passed will be the bound object. This means you will need to reference the property you want, either as d.namesor d.data. Each column in the file will be a different property on the object (as shown above).
所以，当你使用这些数据来创建你的rect元素时，你会得到一个绑定到每个矩形的对象。然后，当您使用selection.attr或传递selection.style的d值将是绑定对象。这意味着您需要将所需的属性引用为d.names或d.data。文件中的每一列都将是对象的不同属性（如上所示）。
One other thing to consider is possibly replacing d3.textwith d3.csvto retrieve the file and parse the data in one step.
另外一个要考虑的就是有可能取代d3.text与d3.csv检索文件，并在一个步骤解析数据。
