javascript json에서 동적 값 저장

Question

그래프를 그리기 위해 캔버스를 사용하는 Dijkstra의 알고리즘에 관한 프로젝트가 있습니다. 내 HTML 파일의 JavaScript에 다음 코드가 있습니다. 이것은 JavaScript 코드의 일부입니다.

var graph = {}; 
var i = 0; 
function ondblclick(e) 
{ 
    var cell = getpos(e) 
    canvasX = cell.x-10; 
    canvasY = cell.y-10; 
    graph = {i: {coord : [cell.x,cell.y]}}; 
    var g_canvas = document.getElementById("canvas"); 
    var context = g_canvas.getContext("2d"); 
    var cat = new Image(); 
    cat.src = "dot1.png"; 
    cat.onload = function() 
    { 
     context.drawImage(cat,canvasX , canvasY); 
    } 
} 

i = i+1 
function submit() 
{ 
for (i = 0; i<= 5; i = i + 1) 
    alert(graph.i.coord); 
} 

여기서 캔버스가 있고 'ondblclick'은 사용자가 캔버스를 두 번 클릭 할 때의 기능입니다. 캔버스는 노드와 모서리를 그리는 데 사용됩니다. 'ondblclick'은 노드 그리기에 사용됩니다.

제 문제는 노드의 좌표 값을 사전 형식의 '그래프'에 저장하는 것입니다. 그것은 마지막 값만을 받아 들인다. 변수 I 및 cell.x, cell.y 값을 사용하여 동일한 사전에 모든 값을 업데이트/추가/확장 할 수 있습니까 ??

Answer 1

거의 들었습니다. 당신이 배열, 해당 배열을 통해 다음 루프, 물체를 넣거나 필요 에 데이터를 얻기 위하여

var graph = []; 
function ondblclick(e) 
{ 
    var cell = getpos(e) 
    canvasX = cell.x-10; 
    canvasY = cell.y-10; 
    graph.push({coord : [cell.x,cell.y]}); 
    var g_canvas = document.getElementById("canvas"); 
    var context = g_canvas.getContext("2d"); 
    var cat = new Image(); 
    cat.src = "dot1.png"; 
    cat.onload = function() 
    { 
     context.drawImage(cat,canvasX , canvasY); 
    } 
} 

function submit() 
{ 
for (i = 0; i<= 5; i = i + 1) 
    alert(graph[i].coord); 
} 

. 문제는 i 변수를 잘못 사용하여 서로의 좌표 코드를 저장하고 검색하는 것이 었습니다.

Answer 2

사전 (키 - 값 저장소)은 그래프의 잘못된 데이터 구조입니다. 노드를 추가 할 수있는 배열을 사용하십시오. 배열의 각 요소에 대한 사전을 사용하여 좌표를 저장하십시오.