javascript - d3 .tsv 文件不起作用-6ren

javascript - d3 .tsv 文件不起作用

转载作者：行者123 更新时间：2023-11-30 05:33:52

27

4

您好，我刚刚开始使用 d3 作为数据可视化工具，并且我正在学习本教程:http://bost.ocks.org/mike/bar/

但是，我的代码:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .range([0, width]);

var chart = d3.select(".chart")
    .attr("width", width);

d3.tsv("data.tsv", type, function(error, data) {
  x.domain([0, d3.max(data, function(d) { return d.value; })]);

  chart.attr("height", barHeight * data.length);

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", barHeight - 1);

  bar.append("text")
      .attr("x", function(d) { return x(d.value) - 3; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

</script>

与硬编码的 html 相比，教程说使用 d3.tsv 不起作用。任何人都可以对此有所了解吗？我已将 data.tsv 文件放在同一文件夹中。

这是我的 .tsv 文件:

name    value
Locke   4
Reyes   8
Ford    15
Jarrah  16
Shephard    23
Kwon    42

最佳答案

如果您使用 chrome 从计算机加载 tsv 文件，则需要按照说明在计算机上设置服务器 in the documentation

When developing locally, note that your browser may enforce strict permissions for reading files out of the local file system. If you use d3.xhr locally (including d3.json et al.), you must have a local web server. For example, you can run Python's built-in server:
python -m SimpleHTTPServer 8888 &

关于javascript - d3 .tsv 文件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25132278/

27

4

0

文章推荐： Java Web Flux : How to fetch body from ServerHttpResponse?

文章推荐： javascript - 在 sails.js 下使用 SSL 时 Passport.js 无法初始化

java - 如果输入 tsv 文件具有 ' or "，则 CSVListReader 从 tsv 文件读取会中断
List list=null; ICsvListReader listReader = null; listReader = new CsvListReader(new FileReader(new
r - 如何导出正确的 TSV？
简短而甜蜜:如何从 R 导出 TSV/CSV？ write.table/write.csv几乎可以工作: test <- data.frame(a = 2 : 4, b = 3 : 5) write.
python - 如何处理引号不均匀的 .tsv？
我刚开始使用 Python 的 csv 模块，但由于缺少转义字符和奇怪的数据，我不断遇到无法解析的问题。以下是导致它抓取多行并中断(制表符分隔值)的两个示例: B 2885192 "Some inpu
将 TSV 文件中的内容转换为多维数组
我已获得一个 TSV 文件。我正在使用 getchar() 函数阅读它，并在运行函数时在命令行中输入 program = MAX_LENGTH_OF_STRINGS) {
c - 奇怪的内存行为处理 TSV
我有一个 .tsv，我需要找出特定列中的频率变量并按降序排列该数据。我在 c 中运行一个脚本，该脚本下载一个缓冲区并将其保存到一个 .tsv 文件中，该文件带有一个名称的日期戳，位于与我的代码相同的目
linux - tsv 文件两列的并集
我有一个存储有向图的文件。每行表示为 node1 TAB node2 TAB权重我想找到节点集。有没有更好的方式获得工会？我当前的解决方案涉及创建临时文件: cut -f1 input_graph
excel - 如何处理大型 TSV 文件
我有一个 5GB+ TSV 文件。我需要可视化它包含的数据，但 Excel 无法打开文件(显然太大了)。 Tableau 不能处理 TSV 文件，Access 也不能。我尝试使用 010 Editor
r - 将多个文本文件合并为一个 tsv 文件
我总共有 254 个文本文件。我想在 r-programming 中将所有文本文件转换为一个 tsv 文件。我该怎么做？即使在 r 中不可能，还有其他方法可以做到吗？ path % wr
r - 如何导入 .tsv 文件
我需要阅读一个表格，它是 .tsv R 中的文件。 test <- read.table(file='drug_info.tsv') # Error in scan(file, what, nmax,
python - 将词典列表保存到 .tsv 文件
我有以下代码要输出到 csv。 import csv keys = ['Name','Hour','Time'] dirname = os.path.dirname(os.path.abspath(_
csv - Tesseract tsv 输出不起作用
我正在尝试在 Ubuntu 17.10 中从命令行执行 tesseract。我希望输出位于 .tsv 文件中，因为我需要置信率。正如所解释的here ，我执行: tesseract testing_i
java - TSV 文件转换为 RDF
我想使用 Java 代码中的 Apache Jena 的库将 tsv 文件转换为 rdf 文件。我找到了一个从 csv 转换为 rdf 的示例，但它对我没有多大帮助。链接为:http://www.es
java - TSV 文件转换为二维数组 - java
我有一个 tsv txt 文件，其中包含 3 行数据。看起来像: HG sn FA PC 2 16:0 PI 1 18:0 PS 3 20:0 PE 2 24:0
python - 将词典列表保存到 .tsv 文件
我有以下代码要输出到 csv。 import csv keys = ['Name','Hour','Time'] dirname = os.path.dirname(os.path.abspath(_
java - 读取 .tsv 文件时跳过备用行
我有一个 .tsv 文件，有 39 列最后一列的数据为字符串，长度超过 100,000 个字符现在发生的事情是当我尝试读取文件第 1 行有标题时，然后是数据发生的事情是在读取第 1 行之后，它转到第
javascript - 如何从多行 tsv 文件访问数据
我在访问 tsv 文件中的数据时遇到一些问题。数据位于 tsv 的第三行。我想访问该名称并在屏幕上打印。 box1.bar1 box1.bar2 box1.bar3 box1.bar4
python - 计算 TSV 文件中所有其他点之间的距离？
我有一个充满 n 个数据点的 TSV 文件，我想计算所有点之间的距离。我有这样的东西: 我想做的是 .iloc 功能 import pandas as pd x = pd.read_csv('data
TSV 上的 Java 正则表达式用于捕获组
我正在尝试在 TSV 上使用正则表达式将每个元素放入捕获组中(听起来很简单，我认为应该如此)。基本上我有一个 58 列的 TSV 文件，我想将每个值放入一个组中。因此，对于正则表达式，我实际上只是执行
javascript - d3 .tsv 文件不起作用
您好，我刚刚开始使用 d3 作为数据可视化工具，并且我正在学习本教程:http://bost.ocks.org/mike/bar/ 但是，我的代码: .chart rect { fill:
javascript - D3 TSV 列访问
我正在关注此处的 D3 示例:http://bl.ocks.org/mbostock/3883245 .我正在从远程服务器请求 TSV 来创建图形。我知道这工作正常，因为图表会根据给定的时间自动更改其

首页

博学

6Ren·AI

商城

javascript - d3 .tsv 文件不起作用