OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) for Javascript D3 Path element

  • Thread starter Thread starter bbbbbbbbbroc
  • Start date Start date
B

bbbbbbbbbroc

Guest
Using D3.js graphs, I'm trying to draw a path defined by a data array, but there is a TypeError when doing this.

This is browser based JS for a static site. Here is the code with the error.

Code:
const path = svgElement.append("path")
        .datum(data)
        .attr("class", "line")
Error-> .attr("d", line)

where line is defined here:

Code:
const x = d3.scaleLinear().domain([400, 700]).range([0, graphWidth]);
const y = d3.scaleLinear().domain([0, 1]).range([graphHeight, 0]);
const line = d3.line()
        .x(d => x(d.input))
        .y(d => y(d.output))

This is the error. It points to .attr("d", line) above.

Code:
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
     at Function.from (<anonymous>)
     at qm (d3.v7.min.js:2:193530)
     at SVGPathElement.u (d3.v7.min.js:2:193741)
     at SVGPathElement.<anonymous> (d3.v7.min.js:2:18187)
     at Vn.each (d3.v7.min.js:2:25660)
     at Vn.attr (d3.v7.min.js:2:25847)
     at HTMLDocument.<anonymous> (script.js:63:10)

Getting data involved await/async and .then() because it was a $.ajax call. I made sure that data is defined and that it is an array (I logged it to console, and made sure it is an array of objects). I'm not sure what is wrong because I have another JS file that is almost exactly similar. contents of data shown by chrome devtools

<p>Using D3.js graphs, I'm trying to draw a path defined by a data array, but there is a TypeError when doing this.</p>
<p>This is browser based JS for a static site. Here is the code with the error.</p>
<pre class="lang-js prettyprint-override"><code>const path = svgElement.append("path")
.datum(data)
.attr("class", "line")
Error-> .attr("d", line)
</code></pre>
<p>where line is defined here:</p>
<pre class="lang-js prettyprint-override"><code>const x = d3.scaleLinear().domain([400, 700]).range([0, graphWidth]);
const y = d3.scaleLinear().domain([0, 1]).range([graphHeight, 0]);
const line = d3.line()
.x(d => x(d.input))
.y(d => y(d.output))
</code></pre>
<p>This is the error. It points to <code>.attr("d", line)</code> above.</p>
<pre class="lang-js prettyprint-override"><code>TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Function.from (<anonymous>)
at qm (d3.v7.min.js:2:193530)
at SVGPathElement.u (d3.v7.min.js:2:193741)
at SVGPathElement.<anonymous> (d3.v7.min.js:2:18187)
at Vn.each (d3.v7.min.js:2:25660)
at Vn.attr (d3.v7.min.js:2:25847)
at HTMLDocument.<anonymous> (script.js:63:10)
</code></pre>
<p>Getting data involved await/async and <code>.then()</code> because it was a <code>$.ajax</code> call. I made sure that <code>data</code> is defined and that it is an array (I logged it to console, and made sure it is an array of objects). I'm not sure what is wrong because I have another JS file that is almost exactly similar. <a href="https://i.sstatic.net/joHEdwFd.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/joHEdwFd.png" alt="contents of data shown by chrome devtools" /></a></p>
 
Top