D3.js가 데이터를 노드에 바인딩하는 방법 이해

D3.js가 데이터를 노드에 바인딩하는 방법 이해

---

D3.js 문서를 읽고 있는데 문서 에서 selection.data방법 을 이해하기가 어렵습니다 .

다음은 문서에 제공된 예제 코드입니다.

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var tr = d3.select("body").append("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr");

var td = tr.selectAll("td")
    .data(function(d) { return d; })
  .enter().append("td")
    .text(function(d) { return d; });

나는 이것의 대부분을 이해하지만 성명서 의 .data(function(d) { return d; })섹션 에서 무슨 일이 일어나고 var td있습니까?

내 추측은 다음과 같다.

• var tr문은 각 TR 노드에 네 개의 요소의 배열을 결합했다
• var td문은 어떻게 든 그 데이터로서 그 네 소자 어레이를 사용하는

그러나 .data(function(d) { return d; })실제로 그 데이터를 얻는 방법은 무엇이며 무엇을 반환합니까?

---

당신이 쓸 때 :

….data(someArray).enter().append('foo');

D3 <foo>는 배열의 각 항목에 대해 하나씩 여러 요소를 만듭니다 . 더 중요한 것은 배열의 각 항목에 대한 데이터를 해당 DOM 요소와 __data__속성 으로 연결한다는 것 입니다.

이 시도:

var data = [ {msg:"Hello",cats:42}, {msg:"World",cats:17} ]; 
d3.select("body").selectAll("q").data(data).enter().append("q");
console.log( document.querySelector('q').__data__ );

콘솔에 표시 {msg:"Hello",cats:42}되는 것은 첫 번째 생성 된 q요소 와 연결 되었기 때문에 개체 입니다.

나중에 할 경우 :

d3.selectAll('q').data(function(d){
  // stuff
});

의 가치는 d그 __data__속성 으로 밝혀졌습니다 . (이 시점 // stuff에서 새로운 값 배열을 반환하는 코드로 바꾸는 것은 사용자에게 달려 있습니다.)

다음 은 HTML 요소에 바인딩 된 데이터와 하위 요소에 데이터 하위 집합을 다시 바인딩하는 기능을 보여주는 또 다른 예입니다 .

 

---

이 코드가 수행하는 작업을 이해하기위한 핵심은 선택 항목이 DOM 요소 배열의 배열 임을 인식하는 것 입니다. 가장 바깥 쪽 배열을 '선택'이라고하고 내부 배열을 '그룹'이라고하며 이러한 그룹에는 DOM 요소가 포함됩니다. d3js.org의 콘솔로 이동하여 d3.selectAll ( 'p')와 같이 선택하여이를 테스트 할 수 있습니다. 'p'요소를 포함하는 배열이 포함 된 배열이 표시됩니다.

귀하의 예에서 처음 selectAll ( 'tr')을 호출하면 모든 'tr'요소를 포함하는 단일 그룹이 선택됩니다. 그런 다음의 각 요소 matrix가 각 'tr'요소와 일치합니다.

그러나 해당 선택에 대해 selectAll ( 'td')를 호출하면 선택에 이미 'tr'요소 그룹이 포함되어 있습니다. 이번에는 각 요소가 각각 'td'요소 그룹 이됩니다. 그룹은 배열 일 뿐이지 만 이전 선택 (이 경우 'tr'요소)을 참조하는 parentNode 속성도 있습니다.

이제이 data(function(d) { return d; })새로운 'td'요소 선택 을 호출 d하면 각 그룹의 부모 노드에 바인딩 된 데이터를 나타냅니다. 따라서 예에서 첫 번째 그룹의 'td'는 배열 [11975, 5871, 8916, 2868]에 바인딩됩니다. 두 번째 'td'그룹은 [1951, 10048, 2060, 6171]에 묶여 있습니다.

Mike bostock의 선택 및 데이터 바인딩에 대한 훌륭한 설명은 여기에서 읽을 수 있습니다. http://bost.ocks.org/mike/selection/

---

카운터 i 를 사용하여 사용 중인 데이터의 인덱스를 표시합니다.

var tr = d3.select("body").append("table").selectAll("tr")
.data(matrix)
.enter().append("tr") //create a row for each data entry, first index
.text(function(d, i) { return i}); // show the index i.e. d[0][] then d[1][] etc.

var td = tr.selectAll("td")
.data(function(d) { return d; })
.enter().append("td")
.style("background-color", "yellow") //show each cell
.text(function(d,i) { return i + " " + d; }); // i.e d[from the tr][0] then d[from the tr][1]...

참고 URL : https://stackoverflow.com/questions/9481497/understanding-how-d3-js-binds-data-to-nodes