d3 component
New i argument
d3.js에 대한 경량 구성 요소 추상화
특징:
destroy 후크.예 :
게시물 | ES6 버전 | 스피너 | ES6 버전 | 스톱워치 (Redux) | ES6 버전 |
카운터 (Redux) | ES6 버전 | 토 도스 | 메뉴가있는 산점도 (Redux) ES6 버전 | 반경 변형을 선택하십시오 |
시계 | 공항 시계 | 예제-뷰어 (Redux, ES6) |
프랙탈 파이 차트 (ES6) |
이 구성 요소 추상화를 사용하면 데이터 중심의 사용자 인터페이스 구성 요소를 개념적 "Boxe-Within-Boxes"로 쉽게 캡슐화하여 다양한 수준의 DOM 트리에 대한 문제를 깨끗하게 분리 할 수 있습니다. 이 구성 요소 추상화는 개념 및 기능이 비 무국적 기능 구성 요소를 반응하기위한 기능에서 유사합니다. 구성 요소가 스스로 렌더링하고 응용 프로그램 상태와 상호 작용하는 데 필요한 모든 것이 렌더링 시간에 구성 요소 트리를 통해 전달됩니다. 구성 요소는 로컬 상태를 저장하지 않습니다. 이것이 D3 성분과 재사용 가능한 차트 패턴의 주요 차이점입니다. 의도 된 사용은 Redux와 같은 단방향 데이터 흐름 아키텍처 내에 있기 때문에 이벤트 또는 이벤트 대표단에 특별한 대우가 제공되지 않습니다.
NPM을 사용하는 경우 npm install d3-component . 그렇지 않으면 최신 릴리스를 다운로드하십시오. UNPKG.com에서 독립형 라이브러리로 직접로드 할 수도 있습니다. AMD, CommonJS 및 바닐라 환경이 지원됩니다. 바닐라에서는 d3 글로벌이 수출됩니다.
< script src =" https://unpkg.com/d3@4 " > </ script >
< script src =" https://unpkg.com/d3-component@3 " > </ script >
< script >
var myComponent = d3 . component ( "div" ) ;
</ script > 참고 : 최근의 주요 버전 릴리스가 있었으며 그와 함께 상당한 API 변경이있었습니다.
요약하면 API는 다음과 같습니다.
var myComponent = d3 . component ( "div" , "some-class" )
. create ( ( selection , d , i ) => { ... } ) // Invoked for entering component instances.
. render ( ( selection , d , i ) => { ... } ) // Invoked for entering AND updating component instances.
. destroy ( ( selection , d , i ) => { ... } ) ; // Invoked for exiting instances, may return a transition.
// To invoke the component,
d3 . select ( "body" ) // create a selection with a single element,
. call ( myComponent , "Hello d3-component!" ) ; // then use selection.call().작동중인 전체 API를 보려면이 "Hello D3-Component"예제를 확인하십시오.
# 구성 요소 ( tagname [, className ]))
지정된 태그 이름 의 DOM 요소를 관리하고 렌더링하는 새로운 구성 요소 생성기를 만듭니다.
선택적 매개 변수 ClassName은 관리되는 DOM 요소에서 class 속성의 값을 결정합니다.
# 요소 . 생성 ( 함수 (선택, d, i) )
새로운 구성 요소 인스턴스가 생성 될 때마다 호출되는이 구성 요소 생성기의 생성 기능을 설정하고, 현재 DOM 요소, 전류 데이텀 ( D ) 및 현재 데이텀 ( I )의 인덱스를 포함하는 선택이 전달됩니다.
# 요소 . 렌더 ( 함수 (선택, d, i) )
이 구성 요소 생성기의 렌더링 기능을 설정합니다. 이 함수는 렌더링 중에 각 구성 요소 인스턴스에 대해 호출되며, 현재 DOM 요소, 전류 데이텀 ( D ) 및 전류 데이텀 ( I )의 인덱스를 포함하는 선택이 전달됩니다.
# 요소 . 파괴 ( 함수 (선택, d, i) )
구성 요소 인스턴스가 파괴 될 때마다 호출되는이 구성 요소 생성기의 파괴 기능을 설정하고, 현재 DOM 요소, 전류 데이텀 ( D ) 및 현재 데이텀 ( I )의 인덱스를 포함하는 선택이 전달됩니다.
구성 요소 인스턴스가 파괴되면 모든 어린이의 파괴 기능 도 (재귀 적으로) 호출 되므로이 기능이 DOM에서 제거되기 전에이 기능이 호출 될 수 있습니다.
파괴 함수는 선택적으로 전환을 반환 할 수 있으며, 이는 전환이 완료 될 때까지 DOM 요소 제거를 연기 할 수 있습니다 (그러나 부모 구성 요소 인스턴스가 파괴되지 않은 경우에만). 깊게 중첩 된 구성 요소 인스턴스는 전환이 완료되기 전에 DOM 노드를 제거 할 수 있으므로 전환이 완료된 후 존재하는 DOM 노드에 의존하지 않는 것이 가장 좋습니다.
# 요소 . 키 ( 기능 )
구성 요소 인스턴스의 DOM 요소를 관리 할 때 내부 데이터 조인에 사용 된 주요 기능을 설정합니다. 키 기능을 지정하는 것은 선택 사항입니다 (배열 인덱스는 기본적으로 키로 사용됩니다). 시간이 지남에 따라 데이터 배열이 재정렬되거나 스 플라이 싱되는 경우 더 효율적으로 렌더링 할 수 있습니다.
# 구성 요소 ( 선택 [, data [, context ]])
단일 DOM 요소를 포함하는 D3 선택 인 주어진 선택 으로 구성 요소를 렌더링합니다. 선택 인수로서 원시 DOM 요소가 전달 될 수있다. 구성 요소 인스턴스에 대한 병합 된 ENTER 및 업데이트 선택이 포함 된 D3 선택을 반환합니다.
[] 로 지정되면 이전에 렌더링 된 모든 구성 요소 인스턴스가 제거됩니다.undefined .요약하면 다음 서명을 사용하여 구성 요소를 렌더링 할 수 있습니다.
selection.call(myComponent, dataObject) → 한 인스턴스, 렌더링 함수 d 는 dataObject 입니다.selection.call(myComponent, dataArray) → dataArray.length 인스턴스, 렌더링 함수 d 는 dataArray[i]selection.call(myComponent) → 한 인스턴스, 렌더링 함수 d 가 undefined 되지 않습니다.컨텍스트 객체가 지정되면, 데이터 배열의 각 데이터 요소는 프로토 타입이 컨텍스트 객체 인 새 개체로 병합되며 결과 배열이 데이터 배열 대신 사용됩니다. 이것은 구성 요소 트리를 통해 콜백 함수를 아래로 전달하는 데 유용합니다. 명확히하기 위해 다음 두 번의 호출은 다음과 같습니다.
var context = {
onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray . map ( function ( d ) {
return Object . assign ( Object . create ( context ) , d ) ;
} ) ) ; var context = {
onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray , context ) ;
