Javascript 用图表显示csv文件中的数据
此页面需要显示从CSV文件读取数据的图形 我一直在关注一个关于这个问题的教程 我还尝试按照教程进行操作，以便将名称添加到图形中。这就是我迷路的地方，教程听起来很简单，但我就是不明白。每次我试图编辑代码时，它都会出错 如果您只想读取一个单列csv文件，它就可以完美地工作 但是，我想读取多列csv文件 此外，如果有什么可以让它更好，请让我知道Javascript 用图表显示csv文件中的数据,javascript,csv,multidimensional-array,d3.js,Javascript,Csv,Multidimensional Array,D3.js,此页面需要显示从CSV文件读取数据的图形 我一直在关注一个关于这个问题的教程 我还尝试按照教程进行操作，以便将名称添加到图形中。这就是我迷路的地方，教程听起来很简单，但我就是不明白。每次我试图编辑代码时，它都会出错 如果您只想读取一个单列csv文件，它就可以完美地工作 但是，我想读取多列csv文件 此外，如果有什么可以让它更好，请让我知道 <html> <head> <script type="text/javascript" src="ht
<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>
<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>
setTimeout（函数（）{window.location.href='index2.html'}，120000）；
d3.csv（“./data/data.csv”），函数（数据）{
//创建SVG图形。
var svg=d3。选择（“图形”）。追加（“svg”）.attr（“宽度”、“1800”）.attr（“高度”、“600”）；
var dataEnter=svg.selectAll（“rect”）.data（data.enter（）；
var graphWidth=800；
var-barWidth=40；
var=30；
var maxData=2；
var horizontalBarDistance=棒宽+棒间距；
var textYOffset=25；
var barXOffset=260；
var barYOffset=5；
var numXOffset=230；
var barHeightMultiplier=graphWidth/maxData；
var fontSize=“30px”；
var color=d3.scale.category10（）；
//画栏杆。
dataEnter.append（“rect”）
.attr（“fill”，函数（d，i）{返回颜色（i）；}）
.attr（“y”，函数（d，i）{return i*horizontalBarDistance-barYOffset；}）
.attr（“x”，barXOffset）
.attr（“高度”，函数（d）{return barWidth；}）
.attr（“宽度”，函数（d）{返回d.data*barHeightMultiplier；}）；
//画课文。
dataEnter.append（“文本”）
.text（函数（d）{返回d.Name；}）
.attr（“字体大小”，字体大小）
.attr（“字体系列”、“无衬线”）
.attr（“y”，函数（d，i）{return i*horizontalBarDistance+textYOffset；}）
.attr（“x”）；
//画出数字。
dataEnter.append（“文本”）
.text（函数（d）{返回d.data；}）
.attr（“字体大小”，字体大小）
.attr（“字体系列”、“无衬线”）
.attr（“y”，函数（d，i）{return i*horizontalBarDistance+textYOffset；}）
.attr（“x”，numXOffset）；
//绘制目标条
dataEnter.append（“rect”）
.attr（“填充”、“红色”）
.attr（“y”，函数（d，i）{返回i*水平距离；}）
.attr（“x”，barXOffset+graphWidth）
.attr（“高度”，70）
.attr（“宽度”，10）；
});
#头衔{
字体系列：无衬线；
字体大小：50px；
颜色：#000；
文字装饰：下划线；
文本对齐：居中；
宽度：100%；
位置：相对位置；
利润率最高：20；
}
#图表{
溢出：隐藏；
利润率最高：40；
}
图1
d3.csv.parsed3.csv.parseRows[
{"names": "john", "data": 78},
{"names": "brad", "data": 105},
...
]
rectselection.attrselection.styledd.namesd.data另一个需要考虑的事情是：用<代码> d3.CS3.<代码>替换<代码> d3。文本< /代码>检索文件并在一个步骤中解析数据。
您所得到的错误是什么。你能链接到一些正在运行的代码吗？当我说它出错时，我的意思是，它就是不工作。我想这是因为我不知道如何分开这些列。我只需要更改代码，使数据引用numberd3.textd3.csvd3.csv.parseRowsd3.csv.parsedatad.data[
{"names": "john", "data": 78},
{"names": "brad", "data": 105},
...
]