javascript - d3 js基本折线图，数据问题

Question

我有简单的line chart 。 由于某种原因，这不会显示任何行，但是，我认为我的数据没问题。为什么？

data = '[{"date":"18-Jun-14","amount":"5"},{"date":"19-Jul-14","amount":"30"},{"date":"18-Aug-14","amount":"138"},{"date":"18-Sep-14","amount":"110"},{"date":"18-Oct-14","amount":"217"},{"date":"18-Nov-14","amount":"342"}]';

另一个问题是注释数据(如下)，我从 php-script 获得，我应该更改为适当的格式。这可能吗，或者我应该更改 php 输出？

/*data='[{"date":"2014-Jun-18","amount":"5"},{"date":"2014-Jul-18","amount":"30"},{"date":"2014-Aug-18","amount":"138"},{"date":"2014-Sep-18","amount":"110"},{"date":"2014-Oct-18","amount":"217"},{"date":"2014-Nov-18","amount":"342"}] ';*/

Answer 1

问题出在您的日期格式上，请尝试

var parseDate = d3.time.format("%d-%b-%y").parse;
root1.forEach(function (d) {
        d.date = parseDate(d.date);
        d.amount = +d.amount;
    });

您必须将其放在比例变量之前，否则它无法正确使用您的数据。

d.amount = +d.amount;

需要将值从字符串转换为整数。

对于第二个问题，您仍然可以使用此输出，只需解析它，将 parseDate 更改为

var parseDate = d3.time.format("%Y-%b-%d").parse;

参见http://jsfiddle.net/6Lxuh/4/对于 php-data 的工作示例