D3 - 잡히지 않는 TypeError : 정의되지 않은 'length'속성을 읽을 수 없습니다.

아래 코드에서 오류가 발생했습니다. 나머지 필드의 데이터에는 문제가 없습니다. 아래D3 - 잡히지 않는 TypeError : 정의되지 않은 'length'속성을 읽을 수 없습니다.

<!DOCTYPE html> 
<html> 
<head> 
<title>Data Entry</title> 
<meta charset='utf-8'/> 
<meta name="keywords" content="D3"/> 
<script type="text/javascript" src="d3/d3.v3.js"></script> 
<style type="text/css"> 
.table {border: 2px; text-align: center;} 
.th {font-size: 12px; font-weight: bold; color: blue;} 
.td {font-size: 12px;} 
</style> 
</head> 
<body> 
<script type="text/javascript"> 
var dataset; 
d3.text('data.txt', function(d){dataset = d3.csv.parse(d, function(d){return {id: +d.id, name: d.name};});}); 
d3.select('body').append('table').attr('class','table').selectAll('tr').data(dataset).enter().append('tr'); 
</script> 
</body> 
</html>

스크린 샷 : Error in Chrome

출처

2014-02-13 codepk

d3.select 줄에 오류가 있으며 데이터 (데이터 집합)로 인해 의심됩니다. – codepk

고려해야 할 두 가지가 있는데, 첫 번째는 당신이 참조를 넣어 한 것입니다 : 또는, 당신은 당신의 데이터 분석 기능을 내부에서 해당 기능을 별도의 initialize() 기능에 모든 코드를 넣어 부를 수 콜백 함수 외부의 데이터 세트에 연결합니다. 따라서 dataset 변수를 전역 변수로 생성하여 d3.text 블록 외부에서 액세스 할 수있는 동안 테이블이 생성 될 때 채울 시간이 없습니다. 따라서 테이블 생성 코드를 d3.text 블록으로 옮기면이 문제를 해결할 수 있습니다. queue.js을 사용하여 데이터 요청을 대기열에 넣을 수도 있습니다.

다른 하나는 객체의 단일 요소 배열을 바인딩하려고 시도했기 때문입니다. 여기서 d3은 배열을 반복하여 객체 (이 경우 테이블 행)를 반복 할 때 객체 배열이 필요합니다. 그런 다음 개체의 정보를 사용하여 테이블을 채 웁니다.

이 두 가지 문제는 다음 코드에서 해결되지만, 테이블 셀에 채워진 행은 방금 생성 된 행과 같습니다. 이렇게하려면 d3noobs post 과 Shawn Allen에 의해 참조 된 stackoverflow 응답을 읽는 것이 좋습니다.

var dataset =[]; 
d3.text('data.txt', function(d) { 
    d3.csv.parse(d, function(d) { 
     var el = { 
      id: +d.id, 
      name: d.name 
     }; 
     dataset.push(el) 
    }); 
var table = d3.select('body') 
    .append('table') 
    .attr('class', 'table'); 

table.selectAll('tr') 
    .data(dataset).enter() 
    .append('tr') 
    .attr("class", "rows"); 

});

한 마지막 것은 당신이 단지 d3.csv 대신 d3.text 및 d3.csv.parse를 사용할 수 있다는 것입니다.

출처

2014-02-14 00:13:24 user1614080

우수 !! 링크도 감사드립니다. – codepk

d3.text(filename, callbackFunction) 방법 (그리고 다른 모든 D3 파일 읽기 기능) 파일이 성공적으로 된 경우, 지정된 콜백 함수 비동기을 즉시 를 반환하고, 전화 짐을 실은.

데이터가 작동해야하는 스크립트의 모든 부분은 콜백 함수 내에서 트리거되어야합니다. 그렇지 않으면 데이터가 사용되기 전에 너무 빨리 실행됩니다. 따라서 콘솔에서 액세스 할 때 두 번째 코드 줄이 실행되었을 때 dataset이 정의되지 않은 이유가있었습니다.

시도 :

d3.text('data.txt', function(d){ 
    dataset = d3.csv.parse(d, function(d){ 
        return {id: +d.id, name: d.name}; 
       }); 
    d3.select('body').append('table') 
      .attr('class','table') 
     .selectAll('tr') 
     .data(dataset) 
     .enter() 
      .append('tr'); 
});

이제 데이터 세트를 사용하는 코드는 콜백 함수 내에서, 그리고 데이터 세트가 준비 될 때까지 실행되지 보장된다.

d3.text('data.txt', function(d){ 
    dataset = d3.csv.parse(d, function(d){ 
        return {id: +d.id, name: d.name}; 
       }); 
    initialize(); 
}); 

function initialize() { 
    d3.select('body').append('table') 
      .attr('class','table') 
     .selectAll('tr') 
     .data(dataset) 
     .enter() 
      .append('tr'); 
}

출처

2014-02-13 23:46:52 AmeliaBR

예제 : http://plnkr.co/edit/s4d3YxI9uDOi7UD5G6cN?p=preview :) –

D3 - 잡히지 않는 TypeError : 정의되지 않은 'length'속성을 읽을 수 없습니다.

답변

관련 문제