javascript - 在 d3.js 中使用 CSV 而不是 TSV 数据

Question

我正在尝试使用 Mike Bostock 的饼图示例，但是当我尝试将数据转换为 csv 时它不起作用，我不确定为什么？

这是一个 plnk 和有问题的代码；

http://plnkr.co/edit/C0bJ0gM1Q9gIGxVe0vyF?p=preview

  d3.csv("data.csv", type, function(error, data) {
  if (error) throw error;

  var path = svg.datum(data).selectAll("path")
    .data(pie)
    .enter().append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc)
    .each(function(d) {
      this._current = d;
    }); // store the initial angles

  d3.selectAll("input")
    .on("change", change);

  var update = function() {
    d3.select("input[value=\"oranges\"]").property("checked", true).each(change);
  };

  function change() {
    var value = this.value;
    clearTimeout(update);
    pie.value(function(d) {
      return d[value];
    }); // change the value function
    path = path.data(pie); // compute the new angles
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }
});

function type(d) {
  return {
      apples: d.apples,
  oranges: d.oranges
  };
}

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

此外，您可能猜到我是 d3 的新手。我想知道什么会更有效，使用来自 excel 文件的原始 csv 数据或将其转换为 JSON 并通过这种方式将数据解析为 d3？ (我知道这是主观的，只是希望获得一些意见，关于编码问题并不重要)。

谢谢你的时间

Answer 1

您的 CSV 文件有误，因此您的 View 无法正常工作。

CSV : Comma Seperated Values, no spaces.

您的 CSV 在哪里，每个逗号后都有空格。因此，所有苹果值都可以正常工作，因为它们没有空格，但对于橙子则不起作用，因为对于初学者来说，它读取 'oranges' 为 'oranges'(注意空格)和所有值后面也有一个空格。

更改为它会正常工作:

apples,oranges
53277,200
28479,200
19697,200
24037,200
40245,200

http://plnkr.co/edit/P3loEGu4jMRpsvTOgCMM?p=preview

至于使用什么数据类型请看这个例子:What are the relative merits of CSV, JSON and XML for a REST API?

第二个答案很好地比较了几种数据类型，例如 CSV、JSON、XML。

这是一个片段:

Advantages:

XML - Lots of libraries, Devs are familiar with it, XSLT, Can be easiily Validated by both client and server (XSD, DTD), Hierarchical Data

JSON - easily interpreted on client side, compact notation, Hierarchical Data

CSV - Opens in Excel(?)

Disadvantages:

XML - Bloated, harder to interpret in JavaScript than JSON

JSON - If used improperly can pose a security hole (don't use eval), Not all languages have libraries to interpret it.

CSV - Does not support hierarchical data, you'd be the only one doing it, it's actually much harder than most devs think to parse valid csv files (CSV values can contain new lines as long as they are between quotes, etc).