D3 data.map 함수에서 오류가 발생했습니다.

x 및 y 좌표로 CSV 파일을로드하고 그 좌표로 원을 작성하려고합니다. 내가 csv 파일을로드하는 방법을 이해하고 콘솔에 좌표를 기록 할 수 있지만 로그 함수가 원을 만들려고 할 때 Not_a_number를 반환하는 이유를 알지 못합니다. 내 data.map 함수에 문제가 있습니까? 덕분에 여기D3 data.map 함수에서 오류가 발생했습니다.

코드 :이 비동기 d3.csv 내부에로드 된 후

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" src="d3/d3.v3.js"></script> 
<style type="text/css"> 
    /* No style rules here yet */  
</style> 
</head> 
<body> 
<script type="text/javascript"> 

    //Width and height 
    var w = 900; 
    var h = 500; 
    var padding = 20; 
    var dataset = []; 

    d3.csv("dataset.csv", function(data) { 
     dataset = data.map(function(d,i) { 
     //THIS WORKS 
     console.log(d); 
     console.log(i); 
     return [ +d["x-coordinate"], +d["y-coordinate"] 
     ]; }); 


    //Create SVG element 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

    svg.selectAll("circle") 
     .data(dataset) 
     .enter() 
     .append("circle") 
     .attr("cx", function(d) { 
      //THIS DOESNT WORK 
      console.log(d); 
      return d[0]; 
     }) 
     .attr("cy", function(d) { 
      return d[1]; 
     }) 
     .attr("r", function(d) { 
      return d[1]; 
     }) 

    }); 

</script> 
</body> 
</html>

출처

2016-06-16 Art_Knopfler

에서만 dataset에 액세스 할 수 있습니다.

코드는 비동기식으로으로 실행됩니다. 즉, 파일이로드 된 후에 만 실행되며, 아래 코드보다 먼저 실행되지는 않습니다.

d3.csv("dataset.csv", function(data) { 
    dataset = data.map(function(d,i) { 
    //THIS WORKS 
    console.log(d); 
    console.log(i); 
    return [ +d["x-coordinate"], +d["y-coordinate"] 
    ]; }); 

    //Create SVG element 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

    svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
      //THIS DOESNT WORK 
      console.log(d); 
      return d[0]; 
    }) 
    .attr("cy", function(d) { 
      return d[1]; 
    }) 
    .attr("r", function(d) { 
      return d[1]; 
    }) 
    .text("hello world"); 

});

대안 적 방법을 만들고 d3.csv 내부 메소드에 전달 dataset.

출처

2016-06-16 10:33:00 paradite

답변을 주셔서 감사합니다.하지만 지금은 "cx"에서 좌표를 기록 할 때 값이없는 것처럼 Nan을 말합니다. 나는 데이터 집합에서 요소의 속성을 선택하는 것이 올바른 방법이 아니라는 것을 알았지 만 수행 방법을 파악할 수는 없습니다. –

''Create SVG element' 전에'data'와'dataset'을 로깅 해보고 질문에 추가해보세요. 함수를 매핑하는 데는 몇 가지 문제가 있다고 생각합니다. – paradite

괜찮습니다. 제 질문을 변경했습니다. 누군가가 도움이되기를 바랍니다! –

D3 data.map 함수에서 오류가 발생했습니다.

답변

관련 문제