Passing an array to feed svg.js's polyline array method throws an error

Question

I'm using svg.js's polyline array method to draw lines from values logged by storing the cursor's x,y coordinates on a page.

The idea is to first let a user browsing the page and move the cursor around, and so feed values into the array, then when clicking on a button svg.js will draw lines based on the cursor' movement.

Being this the syntax to follow:

var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 })

if I manually copy-paste the values in the array as in:

var polyline = draw.polyline([[475,76], [475,76], [489,75], (...)]]).fill('none').stroke({ width: 1 });

svg.js works as expected.

If I pass in a variable, it tells me this:

svg.js:2632 Error: <polyline> attribute points: Expected number, "NaN,528 NaN,531 …".

This is my code:

// movement
var array_cursor_movement = [];
$(document).mousemove(function(e) {
  var cursor_movement = "["+ e.pageX +","+ e.pageY +"]";
  array_cursor_movement.push(cursor_movement);
  var cursor_movement = array_cursor_movement.join(', ');
  console.log("movement:" + cursor_movement);

  localStorage.setItem("cursor_movement_pos", JSON.stringify(array_cursor_movement));
});

// click for preview lines
$(".preview--lines, .close--button").click(function(){
  $(".preview").toggleClass("show--hide");
  // draw lines
  var retrievedData = localStorage.getItem("cursor_movement_pos");
  var array_cursor_movement_b = JSON.parse(retrievedData);
  var cursor_movement = array_cursor_movement_b.join(', ');
  cursor_movement =  "["+cursor_movement+"]";
  console.log("preview:" + cursor_movement);

  var width  = window.innerWidth;
  var height = window.innerHeight;
  var draw = SVG('drawing').size(width, height);
  var polyline = draw.polyline(cursor_movement).fill('none').stroke({ width: 1 });
})

Anyone has experience?

Thanks, André

You dont pass an array to polyine. You made it to a string before. `var cursor_movement = array_cursor_movement_b.join(', '); cursor_movement = "["+cursor_movement+"]";` — Fuzzyma, Apr 23 '16 at 11:35
Make sure your string is in the required form `x,y x,y x,y` . There is no whitespace around comma but it seems your code inserts white space after the comma like x, y by `.join(', ')` — Redu, Apr 23 '16 at 12:23
@Redu not necessary. He just has to push the array and not the joined string. Op already mentioned what the correct syntax is. He just has to do it — Fuzzyma, Apr 23 '16 at 12:55
@Fuzzyma Thanks for the prompt reply! I got a bit confused: this `var cursor_movement = array_cursor_movement_b.join(', ');` already turns the array into a string; and this `cursor_movement = "["+cursor_movement+"]"` wraps the string `[x,y], [x,y]` into a `[]`. Or is this wrong? js newbie here. — , Apr 23 '16 at 13:47
@Fuzzym I cleaned up the code and passed the array to be read by `draw.polyline` but now I still get the same error `Error: attribute points: Expected number, "[718,124],[641,9…".` Those values are the exact ones I have in the array. Here a [codepen](http://codepen.io/afincato/pen/grjdNg). Thanks for your patience! — , Apr 23 '16 at 15:10

Fuzzyma · Accepted Answer · 2016-04-24T09:28:06.290

As I already mentioned in the comments: Stop making Strings!! Just pass the array!

// movement
var array_cursor_movement = [];
$(document).mousemove(function(e) {
  // var cursor_movement = "["+ e.pageX +","+ e.pageY +"]"; // NO - stop making strings!
  var cursor_movement = [ e.pageX, e.pageY ];

  array_cursor_movement.push(cursor_movement);
  // var cursor_movement = array_cursor_movement.join(', '); // STOP
  console.log("movement:", cursor_movement);

  localStorage.setItem("cursor_movement_pos", JSON.stringify(array_cursor_movement));
});

// click for preview lines
$(".preview--lines, .close--button").click(function(){
  $(".preview").toggleClass("show--hide");

  // draw lines
  var retrievedData = localStorage.getItem("cursor_movement_pos");
  var array_cursor_movement_b = JSON.parse(retrievedData);

  // var cursor_movement = array_cursor_movement_b.join(', ');  // what did I say?
  // cursor_movement =  "["+cursor_movement+"]";
  // console.log("preview:", cursor_movement);

  var width  = window.innerWidth;
  var height = window.innerHeight;
  var draw = SVG('drawing').size(width, height);

  // just pass the array and not the string
  var polyline = draw.polyline(array_cursor_movement_b).fill('none').stroke({ width: 1 });
})

PS: Corrected Codepen: http://codepen.io/anon/pen/dMjgdO

// EDIT: I guess I make things more clear: As you said yourself the syntax to create a polyline is as follows:

var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 })

But you tried to do this instead:

var polyline = draw.polyline("[[0,0], [100,50], [50,100]]").fill('none').stroke({ width: 1 })
                             ^ you notice the quotes here?

So you did not pass an array to the function. You passed a string which looks like an array.

Note that there is another syntax to create a polyline which is:

var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

So you actually CAN pass a string. It just is a comma and space seperated list. But DONT do that. You already created your array. You dont need the string.

Thanks a lot for you patience! I just read about arrays and strings the other day and now they're a bit more clear. — , Apr 24 '16 at 08:47

Passing an array to feed svg.js's polyline array method throws an error

1 Answers1