D3图表不显示

Question

过去几个小时我一直在研究这个问题，但我似乎无法让步骤图出现在下面的jfiddle中

http://jsfiddle.net/uk8t6mtg/1/

我怀疑是因为我误解了如何在概念上使用x轴。

我正在尝试制作一个图表，其中包含以下数据：

data = {"step_plot_3": {"x_axis": ["4-Jun-07", "5-Jun-07", "6-Jun-07", "7-Jun-07", "8-Jun-07"], "y_axis": [0.32322222222152003, 9.7200555555434001, 0.8200000000001999, 0.27433333333332, 1.0541111111102599]}}

其中日期可能不是连续的，但会相隔很远。 y值对应于小时数，并由步骤图表示。

代码主要来自D3.js示例，我自己做了其他修改。

示例：

http://bl.ocks.org/mbostock/3883245

关于如何调试此问题的任何建议都将受到高度赞赏。

Answer 1

在你的JS控制台或DOM中，你会看到一个d值无效的路径，“MNaN，447.6 ......”。 xAxis缩放功能的值不正确。如果您将小提琴的第48行更改为： return parseDate(d); 您将看到呈现的有效路径。

Answer 2

此外，您还需要设置路径样式以删除填充并添加笔触颜色。类似的东西：

.line {
    fill:none;
    stroke: red;
}