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出错时，您认为无法正常工作。

CSV：逗号分隔值，无空格。

您的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。

这是一个片段：

优点：

XML - 很多库，Devs熟悉它，XSLT，可以   easiily由客户端和服务器（XSD，DTD），Hierarchical验证   数据

JSON - 在客户端轻松解释，紧凑符号，   分层数据

CSV - 在Excel中打开（？）

缺点：

XML - 在JavaScript中比JSON更难以解释

JSON - 如果使用不当会造成安全漏洞（不要使用eval），   并非所有语言都有库来解释它。

CSV - 不支持分层数据，您是唯一正在做的人   它，它实际上比大多数开发人员想要解析有效的csv困难得多   文件（CSV值可以包含新行，只要它们介于两者之间   报价等）。

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

1 个答案: