d3 .tsv 文件不起作用答案

【问题标题】：d3 .tsv file does not workd3 .tsv 文件不起作用
【发布时间】：2014-08-05 06:17:22
【问题描述】：

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

【问题讨论】：

您的 .tsv 格式是否正确？
嗨@Tom 我附上了我的 .tsv 文件。它是直接从教程..
您是否在服务器中打开该 html 文件？
我已经复制了你的代码。它在这里也不起作用，显示与 NaN 相关的错误。但只是重新排列 tsv 文件。在名称和值之间按制表符，它工作正常>保持空间清晰
@Tom 是的，我使用了 http 服务器。

标签： javascript d3.js

【解决方案1】：

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

在本地开发时，请注意您的浏览器可能会强制执行严格从本地文件系统中读取文件的权限。如果你使用 d3.xhr 本地（包括 d3.json 等），你必须有一个本地 web 服务器。例如，您可以运行 Python 的内置服务器：
python -m SimpleHTTPServer 8888 &

【讨论】：

【解决方案2】：

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

因此，如果您使用服务器来提供数据文件，那么如果您刚刚复制了代码，请确保仔细检查将列值强制为数字的函数。该特定 .tsv 文件的代码中存在错误。

字母频率 .08167 B .01492 C .02782 D .04253 E .12702 F .02288 G .02015 H .06094 我.06966 Ĵ.00153 K .00772 L .04025 米.02406 N .06749 0.07507 P .01929 Q .00095 R .05987 S .06327 .09056 .02758 V .00978 W .02360 X .00150 Y .01974 Z .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
 }

【讨论】：

【解决方案3】：

我有同样的问题。问题是编辑器，在我的例子中是 Atom，正在将 Tab 转换为 Spaces。

在 Atom 中，转到 Preferences > Tab Type 并将其设置为 Hard。

【讨论】：