该页面需要显示一个从 CSV 文件中读取数据的图表。
我一直在关注TheCodingTutorials上的教程。
我也在尝试遵循多列数据教程，以便我可以将名称添加到图表中。这就是我迷路的地方，该教程听起来很简单，但我就是不明白。每次我尝试编辑代码时都会出错。
如果您只想读取单列 csv 文件，它可以完美运行。
但是我想读取一个多列的 csv 文件。
另外，如果有什么可以让它变得更好的，请告诉我。
<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>
我的 CSV 文件现在看起来像这样
names,data
john,78
brad,105
amber,103
james,2
dean,74
pat,45
matt,6
andrew,18
ashley,15
==================================================== =================================
更新
==================================================== =================================
感谢您的所有帮助，这是我更新的代码。
<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>