Javascript 使用D3的交互式条形图

我试图在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…".

---

你没有展示的关键部分是你如何定义你的x标度。该行不关心您的数据是什么；刻度确实如此，而且由于您的x值得到了

NaN

，因此您的刻度有问题

如果您使用的是时间类型scale（），那么是的，它必须是有效的日期时间，即unix时间戳或日期对象。可以使用d3.timeParse（）转换字符串日期

如果您使用的是序号类型的小数位数，如scalePoint（），则可以使用字符串，但必须将所有日期字符串传递给域：

x.domain（data.map（函数（d）{returnd.date；}））；

---

如果有任何缺口，也不会用序号类型的刻度来反映。

您可能没有解析日期。如果您也可以提供数据或创建一个plunkerIt’s not regular date format，正如我所提到的，这不是一个常规的日期格式，那就更好了。类似于“2012-2013”、“2013-2014”等等。@MdJohirulIslam添加了数据。请查看此示例的来源

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