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

Program / 글쓴이

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

답변

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

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

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

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

또는

(...).datum(data)

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

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

…..

답변

이 비트에보고 한 후, 나는 그들이에만 호출 경우 다루 여기에 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. 때때로, 읽는 것보다 무언가를 “탐색”하는 것이 훨씬 쉽습니다.

답변

다음은 좋은 링크입니다.

후자에 따라 :

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

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

…

# selection.datum([value])

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

답변

나는 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}`)

datum조인을 수행하지 않기 때문에 파악하기가 더 간단 하다고 생각 하지만 물론 다른 사용 사례가 있음을 의미합니다.

나에게 하나의 큰 차이점은 더 data많지만 d3 차트에서 (실시간) 업데이트를 수행하는 자연스러운 방법이라는 것입니다. 입력 / 갱신 / 종료 패턴 전체가 일단 도착하면 간단 해지기 때문입니다.

datum반면에 정적 표현에 더 적합한 것으로 보입니다. 예를 들어 아래 예에서 원래 배열에서 루핑하고 인덱스로 데이터에 액세스하는 것과 동일한 결과를 얻을 수 있습니다.

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

여기에서보십시오 : https://jsfiddle.net/gleezer/e4m6j2d8/6/

다시 말하지만, 입력 / 업데이트 / 종료 패턴에서 오는 정신적 부담에서 벗어날 때이 방법을 이해하기가 더 쉽다고 생각하지만 선택을 업데이트하거나 변경해야 할 때 반드시 의지하는 것이 좋습니다 .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>

스 니펫 확장

답변