CODEWITHSUNDEEP
javascriptd3.js
djmcmath
djmcmath

Reputation: 139

d3.js: Multiple Series Line Chart

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?

Upvotes: 0

Views: 548

Answers (2)

wasserholz
wasserholz

Reputation: 2443

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));

Upvotes: 1

djmcmath
djmcmath

Reputation: 139

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));

});

Upvotes: 0

Related Questions