使用D3读取csv返回html而不是csv数据

2024-03-18

我在脚本标签中有以下 d3 代码:

  d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
      console.log(data[0]);

      d.date = parseDate(d.date);
      d.close = +d.close;
    });
    console.log("hello2")

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));

    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    svg.append("path") // Add the valueline path.
    .attr("class", "line")
    .attr("d", valueline(data));

    svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g") // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

  });

当我在浏览器中检查控制台时,输出为console.log was Object {<!DOCTYPE html>: "</head>"}。我预计输出是{"date": "1-May-12", close: "58.13"}.

为什么回调函数使用我的 html 作为数据参数而不是我的 CSV 数据?请注意,我还运行一个简单的节点服务器,以便我可以读取 CSV。


让我们从头开始...我试图从与包含 D3 脚本的 html 相同的文件夹中读取本地 csv data.csv。但这不起作用,因为内置的浏览器安全措施会阻止您从本地计算机上进行读取。在没有意识到这就是导致问题的原因的情况下,我阅读了其他 SO 答案,这些答案引导我编写自己的节点服务器以在本地提供我的 html 和 csv。就在那时,导致我创建这个问题的错误发生了。

现在的问题是,当我的 D3 脚本尝试读取 data.csv 时,它正在读取 D3 脚本所在的 html 文件; D3 在 basic_chart.html 而不是 data.csv 中读取。这就是为什么我得到一个带有描述 html 文件而不是 csv 文件的键值对的对象。我确定这与我的服务器脚本有关,但我没有重写服务器脚本,而是使用了最佳答案D3.js 从 file:/// 加载本地数据文件 https://stackoverflow.com/questions/15417437/d3-js-loading-local-data-file-from-file并通过输入提供我的 html 和 csvpython -m SimpleHTTPServer 8888 &在目标文件文件夹内的命令行上。有效。希望这可以帮助其他人。感谢您的帮助@Cyril。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用D3读取csv返回html而不是csv数据 的相关文章

  • 在 d3v4 堆积条形图中使用 JSON

    我找到了一个d3v3堆积条形图示例 http bl ocks org mstanaland 6100713我想使用它 因为它使用 json 数据 还有一个d3v4规范条形图示例 https bl ocks org mbostock 3886
  • 将 CSV 文件读入 Java 作为数据库表

    我发现了很多关于使用 Java 读取 CSV 的帖子 并且他们所指向的 API 在读取 CSV 文件时都采用了面向行的方法 就像 当你得到一行时 获取每一列的值 我希望有一个更高级别的 API 比如在 Perl 中 DBI 允许您在 CSV
  • 如何运行 D3 示例

    例如https observablehq com d3 zoomable treemap https observablehq com d3 zoomable treemap 如果将脚本片段粘贴到
  • 在另一列中查找重复值时,如何将列数据存储为逗号分隔值? [复制]

    这个问题在这里已经有答案了 如果任何公司的产品都相同 我必须组合或内爆子数组值 预期输出应该类似于 0 gt array company gt 1 6 product gt 5 我的数组是 array 0 gt array company
  • 读取多个 CSV 文件,并在文件开头跳过不同行数

    我必须阅读大约 300 个单独的 CSV 我已经成功使用循环和结构化 CSV 名称来自动化该过程 然而 每个 CSV 在开头都有 14 17 行垃圾 并且随机变化 因此在 read table 命令中硬编码 skip 参数将不起作用 每个
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • 使用 Python 将列名称与 CSV 文件中的数据对齐

    这是我用来将数据写入 csv 文件的代码 with open temp csv a as fp a csv writer fp delimiter t data faceXpos faceYpos faceHeight faceWidth
  • 如何使用 zend 导入 CSV

    如何使用 zend 框架导入 CSV 文件 我应该使用 zend file transfer 还是有任何我必须研究的特殊类 另外 如果我使用 zend file transfer 是否有任何特殊的 CSV 验证器 你不必使用任何 zend
  • d3.js 更新视觉效果

    我有一个与 d3 js 放在一起的树形图 我通过 getJSON 填充数据 效果很好 但是 我在 setInterval 方法中具有此功能 并且它似乎并没有刷新自身 var treemap d3 layout treemap padding
  • 使用 pandas 将字符串对象转换为 int/float

    import pandas as pd path1 home supertramp Desktop 100 life 180 data csv mydf pd read csv path1 numcigar Never 0 1 5 Ciga
  • 在谷歌云上训练神经网络时出现“无法获取路径的文件系统”错误

    我正在使用 Google Cloud 在云上训练神经网络 如下例所示 https cloud google com blog big data 2016 12 how to classify images with tensorflow u
  • 需要帮助绘制多元线之间的区域 - 而不是从轴到线

    我是 d3 js 的新手 我正在努力填充多元百分位数图中线条之间的区域 我不希望在最底线下方或最顶线上方填充任何区域 第一列始终位于图表的底部 第 5 个百分位 最后一列将始终位于图表的顶部 第 95 个百分位 我需要每条线之间单独的区域段
  • 将ADODB二进制流转换为字符串vba

    我有以下问题 我有一个存储在服务器上的 CSV 文件 但它有 3 个字符作为分隔符 我想从 URL 加载数据并使用 作为分隔符将数据填充到 Excel 页面的列中 到目前为止 我找到了使用 ADODB 记录集从网站加载文件的代码 但我无法进
  • 如何将包含多个字段的大型 csv 加载到 Spark

    新年快乐 我知道以前曾提出 回答过此类类似的问题 但是 我的问题有所不同 我有大尺寸的 csv 有 100 个字段和 100MB 我想将其加载到 Spark 1 6 进行分析 csv 的标题看起来像附件sample http www roc
  • 当有很多列时,使用 readr::read_csv() 导入数据时覆盖列类型

    我正在尝试使用 R 中的 readr read csv 读取 csv 文件 我导入的 csv 文件大约有 150 列 我只包含示例的前几列 我希望将第二列从默认类型 我执行 read csv 时为日期 覆盖为字符或其他日期格式 GIS Jo
  • 如何将此数据编码为 JSON 中的父/子结构

    我正在使用 d3 js 将动物 有机体 家族 一次最多 4000 个 可视化为树形图 尽管数据源也可以是目录列表或命名空间对象列表 我的数据如下 json organisms name Hemiptera Miridae Kanakamir
  • 加载数据infile,Windows和Linux的区别

    我有一个需要导入到 MySQL 表的文件 这是我的命令 LOAD DATA LOCAL INFILE C test csv INTO TABLE logs fields terminated by LINES terminated BY n
  • 使用 dtypes read_csv 但列中没有值[重复]

    这个问题在这里已经有答案了 我使用以下代码来读取 csv 通过指定每个列的类型 clean pdf type pd read csv table updated csv usecols col names dtype col types 但
  • 避免在 ES6 的函数内定位 this 的对象作用域

    例如 我正在使用 D3 js 运行一个项目 导入特定模块并调用它们的函数 Setup TypeScript ES6 导入特定的 D3 组件 角6 我有一个对象 在本例中是一个角度指令 并在 SVG 画布上绘制一些圆圈 并希望它们在拖动事件上
  • d3.js:修改树布局中的链接

    抱歉我的英语不好 我在这里使用这个例子 http bl ocks org mbostock 4339083 http bl ocks org mbostock 4339083构建树形图 但我用矩形更改了根的子级中的圆圈 现在该图有点混乱 因

随机推荐