D3 데이텀과 데이터의 차이점은 무엇입니까?

D3 데이텀과 데이터의 차이점은 무엇입니까?

---

누군가 D3.js에서 datum ()과 data ()의 차이점을 설명해 주시겠습니까? 둘 다 사용되는 것을보고 왜 다른 것을 선택해야하는지 잘 모르겠습니다.

---

나는 Mike 자신에게서 올바른 대답을 찾았습니다.

D3-JSON 데이터 구조를 다루는 방법?

데이터를 단일 SVG 요소에 바인딩하려면 다음을 사용하십시오.

(...).data([data])

또는

(...).datum(data)

데이터를 여러 SVG 요소에 바인딩하려는 경우

(...).data(data).enter().append("svg")

.....

---

다음은 좋은 링크입니다.

• D3 "data ()"에 대한 좋은 토론 : D3.js가 데이터를 노드에 바인딩하는 방법 이해

• 단순한 필사자를위한 D3

• 마이크 보스톡의 D3 위키

후자에 따라 :

# selection.data([values[, key]])

지정된 데이터 배열을 현재 선택 항목과 결합합니다. 지정된 값은 숫자 또는 객체의 배열과 같은 데이터 값의 배열이거나 값의 배열을 반환하는 함수입니다.

...

# selection.datum([value])

선택한 각 요소에 대한 바운드 데이터를 가져 오거나 설정합니다. selection.data 메소드와 달리이 메소드는 조인을 계산하지 않으므로 입력 및 종료 선택을 계산하지 않습니다.

---

이 비트에보고 한 후, 나는 그들이에만 호출 경우 다루 여기에 SO에 대한 답변이 완료하지 않은 것으로 나타났습니다 selection.data및 selection.datum입력과 data매개 변수를. 이 시나리오에서도 선택 항목이 단일 요소 인 경우와 여러 요소가 포함 된 경우의 경우 두 요소가 다르게 동작합니다. 또한 선택에서 바인딩 된 데이터 / 데이타를 쿼리하기 위해 입력 인수없이이 두 메소드를 호출 할 수도 있습니다.이 경우 다시 다르게 동작하고 다른 것을 반환합니다.

편집- 여기 에이 질문에 대한 좀 더 자세한 답변을 게시했지만 아래 게시물은 두 가지 방법과 그 차이점에 관한 모든 주요 요점을 거의 포착합니다.

입력 인수data 로 제공 할 때

• selection.data(data)수행하려고 시도 할 요소의 사이에서 데이터를 조인 data의 생성에 기인하는 선택과 배열 enter(), exit()그리고 update()이후에에서 작동 할 수있는 선택. 이것의 최종 결과는 배열을 전달하면 data = [1,2,3]각 개별 데이터 요소 (즉, 데이텀)를 선택과 결합 시키려고 시도하는 것입니다. 선택의 각 요소에는 단일 데이텀 요소 만 data바인딩됩니다.

• selection.datum(data)데이터 조인 프로세스를 모두 무시합니다. 이것은 단순히 data데이터 조인의 경우와 같이 분할하지 않고 선택의 모든 요소에 전체를 지정 합니다. 당신은 전체 배열 바인딩 싶다면 data = [1, 2, 3]당신의 모든 DOM 요소에를 selection, 다음 selection.datum(data)이 달성됩니다.

경고 : 많은 사람들이 이것이selection.datum(data)동등한 것으로생각selection.data([data])하지만selection 단일 요소 가 포함 된 경우에만 해당됩니다. selection여러 DOM 요소가 포함 된경우selection.datum(data)전체를data선택의 모든 단일 요소에바인딩합니다. 대조적으로selection.data([data])의 전체를data첫 번째 요소에만 바인딩합니다selection. 이는의 데이터 조인 동작과 일치합니다selection.data.

data입력 인수를 제공하지 않는 경우

• selection.data()선택의 각 요소에 대한 바운드 데이텀을 가져 와서 반환되는 배열로 결합합니다. 그래서, 당신의 경우 selection데이터 3 개 DOM 요소를 포함하고 "a", "b"하고 "c", 각 각각 결합 selection.data()돌아갑니다 ["a", "b", "c"]. selection예를 들어 데이텀이 "a"바인딩 된 단일 요소 인 경우 일부 요소가 예상 한대로 selection.data()반환 ["a"]되지 않는다는 점에 유의해야합니다 "a".

• selection.datum()선택 의 첫 번째 요소 에 바인딩 된 데이텀을 반환하는 것으로 정의되므로 단일 선택에 대해서만 의미가 있습니다. 그래서 예에서의 바운드 자료와 DOM 요소로 구성된 선택과 이상 "a", "b"그리고 "c", selection.datum()단순히 반환합니다 "a".

경우에도 참고 selection하나의 요소가, selection.datum()그리고 selection.data()다른 값을 반환합니다. 전자는 선택에 대한 바운드 데이텀을 반환하고 ( "a"위의 예에서) 후자는 배열 내에서 바운드 데이텀을 반환합니다 ( ["a"]위의 예에서).

바라건대 이것은 입력 인수로 데이터를 제공 할 때와 입력 인수를 제공하지 않아 바인딩 된 데이텀을 쿼리 할 때 서로 어떻게 selection.data그리고 어떻게 selection.datum()다른지 명확히하는 데 도움이되기를 바랍니다 .

PS - 어떻게이 작품을 이해하는 가장 좋은 방법은 크롬에서 빈 HTML 문서로 시작하고 콘솔을 열고 문서에 몇 가지 요소를 추가하려고 한 후 사용하여 데이터를 바인딩을 시작하는 것입니다 selection.data및 selection.datum. 때때로, 읽는 것보다 무언가를 "탐색"하는 것이 훨씬 쉽습니다.

---

나는 HamsterHuey의 설명이 지금까지 최고라고 생각합니다. 그것에 확장 I 사이의 차이 중 적어도 일부 도시 한 샘플 문서 작성의 차이를 시각적으로 제공하는 방법 data및이 datum.

아래 답변은 이러한 방법을 사용하여 얻은 의견에 더 가깝지만 틀렸다면 정정되어 기쁩니다.

이 예제는 아래 또는 이 Fiddle에서 실행할 수 있습니다 .

const data = [1,2,3,4,5];
const el = d3.select('#root');

 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node => data: ${d}`);

const join= el
.selectAll('div.b')
.data(data);

join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)

I think that datum is simpler to grasp since it doesn't do a join, but of course this also mean it has different use cases.

To me one big difference - although there are more - is the fact that data is just the natural way of doing (live) updates on a d3 chart, as the whole enter/update/exit pattern makes it simple, once you get it.

datum on the other hand seems to me to be more suited for static representations. In the example below for example I could achieve the same result my looping on the original array and accessing the data by index like so:

data.map((n, i) => {
 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node-${n} => data: ${d[i]}`);
});

Try it here: https://jsfiddle.net/gleezer/e4m6j2d8/6/

Again, I think this is way easier to grasp as you keep free from the mental burden coming from the enter/update/exit pattern, but as soon you need to update or change the selection you will surely be better off resorting to .data().

const data = [1,2,3,4,5];
const el = d3.select('#root');

 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node => data: ${d}`);

const join= el
.selectAll('div.b')
.data(data);

join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)

/* Ignore all the css */
html {
  font-family: arial;
}

.l {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0;
}
.l-a {
  background: #cf58e4;
}
.l-b {
  background:  #42e4e4;
}

.a {
  border-bottom: 2px solid #cf58e4;
}

.b {
  border-bottom: 2px solid #42e4e4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>


<div style="margin-bottom: 20px;">
  <span class="l l-a"></span> .datum() <br />
  <span class="l l-b"></span> .data()
</div>

<div id="root"></div>

참고URL : https://stackoverflow.com/questions/13728402/what-is-the-difference-d3-datum-vs-data