个人中心
gpt4 book ai didi

javascript - 从 csv 文件绘制数据

转载 作者：行者123 更新时间：2023-11-30 05:45:11 24 4
gpt4 key购买 nike

此页面需要显示从 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>

最佳答案

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

解析的结果会是这样的:

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

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

另一件需要考虑的事情是可能将 d3.text 替换为 d3.csv 以一步检索文件并解析数据。

关于javascript - 从 csv 文件绘制数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18346496/

24 4 0
文章推荐： javascript - Ember 正在打印 Hello World!两次
文章推荐： c++ - 停止，然后启动线程？
文章推荐： c++ - QwtPlot 在 AutoScale 期间自动调整大小
文章推荐： javascript - 使用 Ajax/JavaScript 的网络爬虫
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com