title: d3js plotting linecharts undefined is not iterable
body: <p>I'm learning <code>d3js</code> and I need help in creating line charts. I'm fairly successful plotting simple objects and bar charts. Line charts seems to be a steep hill to climb.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const data = [{
      "LINE1": [
        10,
        11,
        12,
        15
      ]
    },
    {
      "LINE2": [
        21,
        22,
        23,
        32
      ]
    },
    {
      "LINE3": [
        11,
        12,
        13,
        15
      ]
    }
  ]
  
  // set the dimensions and margins of the graph
  var margin = {
      top: 50,
      right: 100,
      bottom: 130,
      left: 120
    },
    width = 900 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
  
  // append the svg object to the body of the page
  var svg = d3.select("#ca")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);
  
  // Add X axis
  var x = d3.scaleLinear()
    .domain(d3.extent(data, (d) =&gt; d.length))
    .range([0, width]);
  
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(5));
  
  // Add Y axis
  // I need help in this area, how can I get the min and max values set in the domain?
  var y = d3.scaleLinear()
    .domain([0, d3.max(data, (d) =&gt; d.values)])
    .range([height, 0]);
  
  svg.append("g")
    .call(d3.axisLeft(y));
  
  // Draw the line
  // I need help in this area, how can I get the lines plotted, js gives error in this!
  svg.selectAll(".line")
    .data(data)
    .enter()
    .append("path")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("stroke-width", 1.5)
    .attr("d", (d) =&gt; {
      console.log(d)
      var k = d3.line()
        .x((d) =&gt; x(d))
        .y((d) =&gt; y(d))
        (d.values);
      console.log(k);
      return k;
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="ca"&gt;
  &lt;/div&gt;
  &lt;script src="https://d3js.org/d3.v6.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I get the line charts plotted with data format I have?</p>