Javascript d3.js 读取本地 CSV 文件-6ren

Javascript d3.js 读取本地 CSV 文件

转载作者：行者123 更新时间：2023-12-03 04:07:08

27

4

因此，我需要使用本地加载的 HTML 网页(例如使用 file:///)读取 .CSV 文件，并使用 d3.js 将内容绘制在图表上。到目前为止，我尝试将两个示例连接在一起但没有成功......

如果打开它，它可以读取本地 csv 文件的内容，但由于某种原因图表没有出现。

非常感谢任何帮助!

<!DOCTYPE html>
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>

<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <!--this doesn't seem to help-->
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <title>Process local CSV file</title>
    <script src="d3.js" charset="utf-8"></script>
  </head>
  <body>
    <script>
       var rowToHtml = function( row ) {
         var result = "";
         for (key in row) {
           result += key + ": " + row[key] + "<br/>"
         }
         return result;
       }

       var previewCsvUrl = function( csvUrl ) {
         d3.csv( csvUrl, function( rows ) {
           d3.select("div#preview").html(
             "<b>First row:</b><br/>" + rowToHtml(rows[0]));
         })
       }

       d3.select("html")
          .style("height","100%")

       d3.select("body")
          .style("height","100%")
          .style("font", "12px sans-serif")

        .append("input")
          .attr("type", "file")
          .attr("accept", ".csv")
          .style("margin", "5px")
          .on("change", function() {
            var file = d3.event.target.files[0];
            if (file) {
              var reader = new FileReader();
                reader.onloadend = function(event1) {
                  var dataUrl = event1.target.result;
                  // The following call results in an "Access denied" error in IE.
                  previewCsvUrl(dataUrl);
                  rendergraph(dataUrl);
              };
             reader.readAsDataURL(file);
            }
         })

      d3.select("body")
       .append("div")
         .attr("id", "preview")
         .style("margin", "5px")


var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%d-%b-%y");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

var rendergraph = function( url1 ) {
d3.csv(url1, function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

}

    </script>
  </body>
</html>

最佳答案

svg 在这里被选中，但它不在 dom 中:

var svg = d3.select("svg"),

要么在 html 中添加 svg 元素，要么使用 d3 将上述代码替换为:

var svg = d3.select("body").append('svg').attr('width', 300).attr('height', 300),

关于Javascript d3.js 读取本地 CSV 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44499456/

27

4

0

文章推荐： javascript - 如何在angularjs中获取修改后的对象

文章推荐： javascript - 格子链接 Dwolla 集成

文章推荐： javascript - 记录列表的 TypeScript 数据类型

文章推荐： javascript - AngularJS-ng-repeat 中的项目未在变量更新时更新

csv - 如何将 csv 文件读入数组并与另一个 csv 文件中的条目进行比较和替换？
我有两个 csv 文件 file1.csv 和 file2.csv。 file1.csv 包含 4 列。文件1: Header1,Header2,Header3,Header4 aaaaaaa,bb
csv - 如何测试 CSV 文件以及如何找出两个 CSV 文件之间的差异
我想知道是否有任何方法可以在导入数据库之前测试 CSV 文件？我有一个包含多列的巨大 CSV 文件，每列都有不同的数据类型和大小。如何测试生成的 CSV 文件中出现的数据是否与每列的大小一致？还有
csv - CSV 中的查找值和第二列的返回值
我正在从 SCOM 中提取服务器列表，并希望根据包含以下数据的 CSV 检查此列表: Computername,Collection Name Server01,NA - All DA Servers
csv - 如何使用 Super CSV 部分读取 CSV 文件
我有一个包含 24 列的 csv 文件。其中我只想阅读 3 列。我看到 super CSV 是一个非常强大的库，但我不知道如何部分读取 CSV。 partial reading上的链接坏了。请帮我举
csv - 如何将加特林日志文件导出到 csv
我正在尝试将加特林日志文件导出到 CSV，因为我需要更新 google 电子表格中的所有全局值，因为我的经理需要电子表格中的值。最佳答案此 CSV 文件被删除并替换为 JSON 文件，名为 glo
csv - csv 是结构化数据还是半结构化数据？
我对 csv 是结构化数据还是半结构化数据感到困惑。就像 RDBMS 是一个有关系的结构化数据，但 csv 没有关系。我无法找到确切的答案。最佳答案我可以说，具有恒定列和行(二维)的 CSV
csv - 使用 pipes-csv 从 csv 文件中读取第一行
我正在使用 pipes-csv 库读取一个 csv 文件。我想先读第一行，然后再读其余的。不幸的是，在 Pipes.Prelude.head 函数返回之后。管道正在以某种方式关闭。有没有办法先读取 c
csv - CSV 文件中空行的含义
起初这似乎很明显，但现在我不太确定。如果 CSV 文件具有以下行: a, 我会将其解释为具有值“a”和“”的两个字段。但是然后查看一个空行，我可以很容易地争辩说它表示一个值为“”的字段。我接受文件
csv - 将列表字典写入 csv
我正在尝试将列表字典写入 CSV 文件。我希望这些键是 CSV 文件的标题，以及与该键关联的列中的每个键关联的值。如果我的字典是: {'600': [321.4, 123.5, 564.1, 764
csv - 将数组导出为 CSV
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 10 年前。 Improve thi
csv - CSV 文件可以有注释吗？
是否有任何官方方法允许 CSV 格式的文件允许评论，无论是在其自己的行上还是在行尾？我尝试检查wikipedia关于此以及RFC 4180但两者都没有提到任何让我相信它不是文件格式的一部分的内容，所
csv - 如何从字符串中读取 CSV？
我有一些 csv 格式的数据。然而它们已经是一个字符串，因为我是从 HTTP 请求中获取它们的。我想使用数据框来查看数据。但是我不知道如何解析它，因为 CSV 包只接受文件，而不接受字符串。一种解决
csv - CSV 文件中的值列表应该使用哪个分隔符？
我有一个 CSV 文件，其中包含一些字段的值列表。它们作为 HTML“ul”元素存储在数据库中，但我想将它们转换为对电子表格更友好的东西。我应该使用什么作为分隔符？我可以使用转义的逗号、竖线、分号或
csv - 如何使用管道分隔符导出到 .csv
我使用 Google 表格(电子表格)来合并我的 Gambio 商店的不同来源的文章数据。要导入数据，我需要在 .csv 文件中使用管道符号作为分隔符/分隔符，并使用 "作为文本分隔符。在用于导出为
csv - 报表生成器导出到带有列标题空间的 CSV
这是一个奇怪的请求，因为我们都知道数据库头不应该包含空格。但是，我正在使用的系统需要在其标题中使用空格才能导入。我创建了一个 Report Builder 报告，它将数据构建到一个表中，并在我运行
csv - 当其中一个值可能在字符串中包含逗号时处理 .CSV
我有一个 .csv 文件，我需要将其转换为 coldfusion 查询。我使用了 cflib.org CSVtoQuery 方法，它工作正常......但是...... 如果 csv 中的“单元格”在
csv - 文化独立 CSV
我想知道是否有任何方法可以生成文化中性 CSV 文件，或者至少指定文件中存在的特定列的数据格式。例如，我生成了包含带小数点分隔符 (.) 的数字的 CSV 文件，然后将其传递给小数点分隔符为 (,
Javascript:如果 CSV 中没有，则将值添加到 CSV - 如果已经在 CSV 中 - 从 CSV 中删除
我正在构建一个 CSV 字符串 - 因此用户单击 div 的所有内容 - 5 个字符的字符串都会传递到隐藏字段中 - 我想做的是附加每个新值并创建一个 CSV 字符串 - 完成后- 在文本框中显示 -
Linux CSV - 将 CSV 文件中的列添加到另一个 CSV 文件
我正在努力从另外两个文件创建一个 CSV 文件这是我需要的我想要的文件(很多其他行) “AB”；“A”；“B”；“C”；“D”；“E” 我拥有的文件: 文件 1:"A";"B";"C";"D";"
csv - 将包含带引号的值的表导出到配置单元中的本地 csv
我正在尝试将表导出到配置单元中的本地 csv 文件。 INSERT OVERWRITE LOCAL DIRECTORY '/home/sofia/temp.csv' ROW FORMAT DELIMI

首页

博学

6Ren·AI

商城

Javascript d3.js 读取本地 CSV 文件