Lost in d3.line, how to pass multiple arguments for x and y ?

Community Help
1

I’m a little lost with d3.line behavior in d3@5.

My series are structured like that :

Screenshot_2020-04-08 Covid(1)
Screenshot_2020-04-08 Covid(1)896×1019 253 KB

I want to draw a line for each series of values in data , i double check that my computed x and y are ok.

  svg.append("g")
    .selectAll("g")
       .data(growthSeries)
       .join("g")
      .selectAll("path")
      .data(d => d)
      .join("path")
      .attr("fill", "none")
      .attr("stroke-miterlimit", 1)
      .attr("stroke-width", 3)
      .attr("stroke", d => ycolor(d.name))
//      .attr("x", d => x(d3.isoParse(d.dateRep)))
//      .attr("y", d => y2(d.values))
      .attr("d", d => myline);

With myLine function :

myline = d3.line() 
          .x(d => x(d3.isoParse(d.dateRep)))
          .y(d => y2(d.values))

This return weird thing for d :

d='function a(a){var u,c,f,s=a.length,l=!1;for(null==r&&(o=i(f=no())),u=0;u<=s;++u)!(u<s&&e(c=a[u],u,a))===l&&((l=!l)?o.lineStart():o.lineEnd()),l&&o.point(+t(c,u,a),+n(c,u,a));if(f)return o=null,f+""||null}'

I i change my call code by :

.attr("d", d  => myline(d));

No d path is calculated at all.

I also try without success this , because i don’t know how pass two values (d.values and d.dateRep) to myline function … because d3.line() take no args.

 .attr("d", d => myline(d.values, d.dateRep));

Complete code :

2

It looks like you’re creating one path element per data point, whereas you need to create one per series.

Also, you’re returning myline for the value of d attribute (d => myline), rather than invoking the line generator (d => myline(d)).

Try something like this:

svg.append("g")
  .selectAll("path")
  .data(growthSeries)
  .join("path")
    .attr("d", myline);

Also see this example:

3

Uhh ok,
using this solution it works but i lost the possibility to access color using y(d.name).
The only possibility was to modify my structure of data structure to pass color in series, and not for each point i suppose ?

Edit : Nop, i found this way :

svg.append("g")
  .selectAll("path")
  .data(growthSeries)
  .join("path")
     .attr("stroke", d => ycolor(d[0].name))
     .attr("fill", "none")
    .attr("d", myline);

But this is not really beautiful, when you read the code, it’s hard to understand what is this d[0] …