[javascript] 자바 스크립트 라이브러리 d3 호출 기능

Program / 글쓴이

d3.call ()이 어떻게 작동하는지 언제 어디서 사용해야하는지 이해할 수 없습니다. 여기완료하려는 튜토리얼 링크는 .

누군가이 작품이하는 일을 구체적으로 설명해 주시겠습니까?

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

svg.append("g").call(xAxis);

답변

여기서 트릭은 xAxis가 SVG 요소를 생성하는 함수라는 것을 이해하는 것입니다. 실제로에서 반환하는 함수 d3.svg.axis()입니다. scale 및 orient 함수는 연결 구문의 일부일뿐입니다 (자세한 내용은 http://alignedleft.com/tutorials/d3/chaining-methods/ 참조). ).

따라서 svg.append("g")SVG 그룹 요소를 svg에 추가하고 선택의 형태로 자신에 대한 참조를 반환합니다 (여기서는 동일한 체인 구문). call선택에 사용할 때 선택 xAxis요소에 이름이 지정된 함수를 호출합니다 g. 이 경우 xAxis새로 생성 및 추가 된 그룹 에서 축 함수를 실행하고 g있습니다.

그래도 말이 안된다면 위의 구문은 다음과 같습니다.

xAxis(svg.append("g"));

또는:

d3.svg.axis()
      .scale(xScale)
      .orient("bottom")(svg.append("g"));

답변

받아 들여진 대답이 IMO에서 빠진 .call()것은 D3 API 함수 이며 Function.prototype.call () 과 혼동하지 않아야한다는 것입니다.

selection.call(function[, arguments…])

지정된 함수를 정확히 한 번 호출하여 선택적 인수와 함께이 선택 항목을 전달합니다. 이 선택을 반환합니다. 이것은 수동으로 함수를 호출하는 것과 동일하지만 메소드 체인을 용이하게합니다. 예를 들어 재사용 가능한 함수에 여러 스타일을 설정하려면 다음을 수행하십시오.

이제 다음과 같이 말합니다.

d3.selectAll("div").call(name, "John", "Snow");

이것은 대략 다음과 같습니다.

name(d3.selectAll("div"), "John", "Snow");

유일한 차이점은 selection.call은 항상 호출 된 함수 name 의 반환 값이 아니라 선택 항목을 반환 한다는 것 입니다.

답변