d3.js: Multiple Series Line Chart

djmcmath 0
Viewed 53

With this code as a starting point: https://bl.ocks.org/d3noob/15e4f2a49d0d25468e76ab6717cd95e7 I'm attempting to make a simple line graph with multiple data series. Per @wasserholz suggestion, I've added a complete MVP: https://github.com/djmcmath/d3-fail-mvp

The data parsing portion seems to be working correctly, in that I'm creating a map with 5 elements, each of which is a "sailing date" and array of values associated with that date. This is the variable named "group_by_sailing_date".

Parsed / processed data

The axes appear to be reasonable: For the X-axis, I'm taking the "since_midnight" value, pulling the extents, and formatting it as a time. The Y-axis, similarly, is just the extents of the "margin" value. I get this -- so far so good:

enter image description here

Next, I want to add some lines to my chart. My thinking is that I iterate through the map, and for each of the map elements, I add the element as data to a series. What I get is a gigantic "Nothing Happens" though. No lines, no errors, just "Gosh, your data looks great, but I'm going to ignore it."

//line generator?
var valueline = d3.line()
  .x(function(d) { return x(d.since_midnight); })
  .y(function(d) { return y(d.margin); });
  
group_by_sailing_date.forEach(function (s) {
  svg_summ.append("path")
    .data(s)
    .attr("stroke", "steelblue")
    .attr("stroke-width", "3px")
    .attr("d", valueline);
});

I feel like I'm missing something really fundamental here, but I'm drawing a complete blank (pun intended, ha ha ha). Help?

d3.js javascript
2 Answers

Following the rules of selection within d3.js (https://bost.ocks.org/mike/selection/) the code should look something like this:

svg_summ.selectAll("path")
  .data(group_by_sailing_date)
  .enter()
    .append("path")
      .attr("stroke", "steelblue")
      .attr("fill", "none")
      .attr("stroke-width", "1px")
      .attr("d", (d) => valueline(d));
wasserholz0

Ok, I've made it work, but I don't know why. I removed the .data(s) line, and changed "valueline" to "valueline(s)". No idea why this works. Technically, it's all good, but I'd be thrilled if someone could help me understand what this code actually means.

group_by_sailing_date.forEach(function (s) {
 svg_summ.append("path")
  .attr("stroke", "steelblue")
  .attr("fill", "none")
  .attr("stroke-width", "1px")
  .attr("d", valueline(s));

});

djmcmath0
Related