svg.jsのポリライン配列メソッドにフィードを渡す配列を渡すと、エラーが発生します

Question

svg.jsのポリライン配列メソッドを使用して、カーソルのx、y座標をページに格納してログに記録します。

最初にユーザーがページをブラウズしてカーソルを移動させ、値を配列に送り、ボタンをクリックすると、カーソルの動きに基づいて線が描かれます。

フォローするthis構文ビーイング：

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

を私は手動でコピー・ペーストした場合の値を配列でのように：予想通り

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

svg.jsが働きます。

私は変数に渡す場合には、それは私に告げるこの：

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

これは私のコードです：

// 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 }); 
}) 

誰もが経験を持っていますか？

おかげで、 アンドレ私はすでにコメントで述べたように

Answer 1

：文字列を作る停止！ただ配列を渡す！

// 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：修正しCodepen：http://codepen.io/anon/pen/dMjgdO

//編集：私は、私は物事をより明確に推測： あなたは次のようにポリラインを作成するための構文は自分で言ったように：

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

これを代わりにしようとしました：

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

関数に配列を渡します。あなたは配列のように見える文字列を渡しました。

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

ですから、実際に文字列を渡すことができます：あるポリラインを作成するには、別の構文があることを

注意。カンマとスペースで区切られたリストです。しかし、それはしません。すでに配列を作成しています。文字列は必要ありません。