D3.js : 레이아웃에 대한 내 데이터 얻기

Question

the D3 cluster force layout으로 실험하고 있습니다. 그러나 데이터를 바인딩하는 방법에 대해서는 확신 할 수 없기 때문에 내 데이터를 가질 수 없습니다.

이것은 바인딩을 사용하지 않고 시도한 것으로 동작하지 않습니다.

d3.tsv("data.tsv", function(data){ 

    nodes = d3.range(n).map(function(data) { 
     var i = Math.floor(Math.random() * m), 
      r = Math.sqrt((i + 1)/m * -Math.log(data.diskSpace)) * maxRadius, 
      d = { 
       cluster: i, 
       radius: data.radius, 
       x: Math.cos(i/m * 2 * Math.PI) * 200 + width/2 + Math.random(), 
       y: Math.sin(i/m * 2 * Math.PI) * 200 + height/2 + Math.random() 
      }; 
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d; 
    return d; 
}); 

예상대로 작동하지 않는 것 같습니다.

정확하게 무엇이 일어나고 있으며 어떻게 수정합니까?

편집 :

model diskSpace radius 
DE431 8 8 
DD342 16 18 
... 

Answer 1

먼저 TSV 파일, 확인 파일이 실제로 탭이 아닌 공백으로 분리되어 있는지 확인합니다. d3에 tsv를로드하면 다음과 같이 표시됩니다.

d3.tsv('data.tsv', function (rows) { 
    console.log(rows); 
}); 

행 배열이 콘솔에 기록됩니다. 이 호출은 비동기 적으로 이루어지며 d3.tsv() -function은 행을 반환하지 않고 첫 번째 인수로 행이있는 함수를 호출합니다.

d3.tsv('data.tsv', function (rows) { 
    var nodes = rows.map(function (item) { 
     var i = item['diskSpace'], 
      r = +item['radius'], // note the + to convert to number here. 
      d = { 
       cluster: i, 
       radius: r, 
       x: Math.cos(i/m * 2 * Math.PI) * 200 + width/2 + Math.random(), 
       y: Math.sin(i/m * 2 * Math.PI) * 200 + height/2 + Math.random() 
      }; 
     if (!clusters[i] || (r > clusters[i].radius)) { 
      clusters[i] = d; 
     } 
     return d; 
    }); 

    // insert code generating the force layout here (including the cluster and collide functions) 
}); 

이것은 디스크 공간에 의해 행을 클러스터합니다

이제 우리는 D3의 힘 레이아웃 이해 무언가로이 데이터를 변환해야합니다. 제가 추가 한 의견에 유의하십시오.

당신이 게시에 추가 코드 예제는 임의의 데이터를 생성하고 'data.tsv'에서 데이터를 만지지 않는 Demo here