D3图形未显示

Question

I have been digging at this problem for the past few hours, but I can't seem to get the step plot to appear in the jfiddle below

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

I suspect it is because I am misunderstanding how to use an x-axis with times conceptually.

I am trying to make a graph where I have data like:

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]}}

where the dates may not be sequential but will be equally far apart. The y-values correspond to hours and are represented by a step plot.

The code comes largely from a D3.js example with additional modifications I have made myself.

Example:

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

Any advice on how to debug this issue would be largely appreciated.

Answer 1

In your JS console or in the DOM, you'll see a path with an invalid value for d, "MNaN,447.6.....". An incorrect value was going into the xAxis scaling function. If you change line 48 of the fiddle to: return parseDate(d); You'll see a valid path rendered.

Answer 2

Also you'd need to style the path to remove the fill and add a stroke color. Something like:

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