Question

此页面需要显示一个从CSV文件中读取数据的图表。

我一直在关注TheCodingTutorials的教程。

我也尝试按照Multi-Column Data教程，以便我可以将名称添加到图表中。这是我迷路的地方，教程让它听起来很容易，但我只是不明白。每次我尝试编辑代码时都会出错。

如果您只想读取单列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>

Answer 1

由于您的数据包含标题行作为其第一行，因此您应该使用d3.csv.parse而不是d3.csv.parseRows。 CSV documentation解释了差异。

解析的结果将是这样的：

[
    {"names": "john", "data": 78},
    {"names": "brad", "data": 105},
    ...
]

因此，当您使用此数据创建rect元素时，您将获得绑定到每个rect的对象。然后，当您使用selection.attr或selection.style时，您传递的d值将成为绑定对象。这意味着您需要引用所需的媒体资源，可以是d.names或d.data。文件中的每一列都是对象的不同属性（如上所示）。

要考虑的另一件事是可能用d3.text替换d3.csv来检索文件并一步解析数据。

绘制csv文件中的数据

1 个答案: