D3 .tsv文件不工作

d3 .tsv file does not work

本文关键字：工作 文件 tsv D3      更新时间：2023-09-26

嗨，我刚刚开始使用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>

，教程说使用d3。与硬编码的html相比，TSV不起作用。有人能解释一下吗?我已经把data.tsv文件放在同一个文件夹中了。

这是我的。tsv文件:

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

如果你用chrome从你的电脑加载tsv文件，你需要在你的电脑上设置一个服务器，正如文档

所解释的那样

在本地开发时，请注意您的浏览器可能强制执行strict从本地文件系统读取文件的权限。如果你使用d3。本地XHR(包括d3。Json等)，你必须有一个本地web服务器。例如，你可以运行Python的内置服务器:

python -m SimpleHTTPServer 8888 &

服务器部分正确。我自己也在运行一个简单的节点服务器，但是在垂直条形图教程第3部分中遇到了类似的问题:http://bost.ocks.org/mike/bar/3/

因此，如果您正在使用服务器来提供您的数据文件，无论它可能是什么，只要确保仔细检查函数，强制列值到一个数字，如果您刚刚复制了代码。那个特定.tsv文件的代码中有一个错误。

信频率一个.08167B .01492C .02782D .04253E .12702F .02288G .02015H .06094我.06966J .00153K .00772L .04025M .02406N .06749O .07507P .01929问.00095R .05987年代.06327T .09056U .02758V .00978W .02360X .00150Y .01974Z .00074

修改一下:

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

: 

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

否则你会得到一个错误，因为这个NaN值:

 {
   frequency: ".08167"
   letter: "A"
   value: NaN
 }

我也有同样的问题。问题是编辑器(在我的例子中是Atom)正在将Tab转换为空格。

在Atom中进入Preferences> Tab Type并将其设置为Hard。

相关文章：