Question

我试图在D3上绘制折线图，其中x变量是2012-13财政年度（而不是标准数据格式）。因此，我考虑将x值保持为字符串。

我有以下代码来定义行

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

然后，我读取数据，并将该行添加到图表中：

d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = d.date);
        d.close = +d.close;
    });

    ...

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
            .attr("d", valueline(data));

        ...

        // add axes etc

});

这不起作用，我收到以下错误：

Error: <path> attribute d: Expected number, "MNaN,190.81307074…".

这是否意味着折线图必然需要日期或数字？

数据如下：

date,close
2012-13,58.13
2013-14,53.98
2014-15,67.00
2015-16,89.70
2016-17,99.00

Answer 1

你没有展示的关键是你如何定义x尺度。该行不关心您的数据是什么;规模确实如此，因为你的x值为NaN，你的规模是错误的。

如果您使用的是时间类型比例（https://github.com/d3/d3-scale#scaleTime），则是，它必须是有效的日期时间，IE是一个unix时间戳或日期对象。您可以使用d3.timeParse（https://github.com/d3/d3-time-format#timeParse）转换字符串日期。

如果您使用的是序数类型比例，例如scalePoint（https://github.com/d3/d3-scale#scalePoint），那么您可以使用字符串，但必须为域中传递所有日期字符串：

x.domain(data.map(function(d) { return d.date; }));

如果存在任何差距，那么这些差距也不会以序数式比例反映出来。

使用D3的交互式条形图

1 个答案: