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

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

My series are structured like that :

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 :

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:

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