Question

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

Answer 1

如果要从计算机加载带有chrome的tsv文件，则需要按照说明in the documentation

在计算机上设置服务器

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

Answer 2

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

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

字母频率 A .08167 B .01492 C .02782 D .04253 E .12702 F .02288 G .02015 H .06094 我.06966 J .00153 K .00772 L .04025 M .02406 N .06749 O .07507 P .01929 问.00095 R .05987 S .06327 T .09056 U .02758 V .00978 W .02360 X .00150 是.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
 }

Answer 3

我有同样的问题。问题是我的情况下编辑器Atom正在将Tab转换为Spaces。

在Atom中转到首选项＆gt;标签类型并将其设置为硬。

d3 .tsv文件不起作用

3 个答案: