CODEWITHSUNDEEP
graphd3.jsline
AeroSpartacus
AeroSpartacus

Reputation: 121

D3 Line Graph - Single line seems to be fragmenting into several

I'm working on a relatively simple visualization for interval data. The data points will be reported for every 15 minutes of the day, and I'm trying to chart that for the whole day. Everything works fine if I limit it to very few points, but when I try to use an entire day of data, the line appears to fragment into several lines for some reason.

I've inspected the SVG elements, and there's only one path element, so I'm not sure what's going on. I've put all the relevant code (which is pretty simple really, not much room to mess up) into a fiddle for reference: http://jsfiddle.net/TUjhB/. Any tips are appreciated.

var data = d3.csv.parse(csvData);

var line = d3.svg.line()
  .x(function (d) { return x(d.Timestamp); })
  .y(function (d) { return y(d.num); });

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

Upvotes: 0

Views: 223

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

It works fine if you sort the data (which isn't sorted in your input) --

data.sort(function(a,b) { return a.Timestamp - b.Timestamp; });

Complete jsfiddle here.

Upvotes: 1

Related Questions