[D3] Local variables & Namespaces 사용법

D3 로컬을 사용하면 데이터와 관계없이 로컬 상태를 정의할 수 있습니다. D3 로컬 변수는 DOM 요소별로 범위가 지정됩니다. local()새로운 지역 변수를 선언합니다. DOM에 의해 범위가 지정됩니다.const foo = d3.local();local.set(node, value)지정된 노드의 로컬 값을 value로 설정하고 지정된 값을 반환합니다. 단일 변수만 설정하는 경우 Selection.property의 사용을 할 수 있습니다.local.get(node)지정된 노드에서 로컬 값을 반환합니다. node가 로컬을 정의하지 않으면 가장 가까운 조상의 값을 반환합니다.local.remove(node)지정된 노드에서 이 로컬 값을 삭제합니다.제거 전에 로컬을 정의한 경우 true를 반환하고 그렇지 않으..

• format_list_bulleted 시각화
• · 2024. 5. 29.
• textsms

[D3] Control flow 사용법

selection.each(function)현재 데이터, 현재 인덱스, 현재 그룹을 순서대로 전달하여 선택된 각 요소에 대해 지정된 함수를 호출합니다.selection.call(function, ...arguments)선택적 인수와 함께 이 선택 항목을 전달하여 지정된 함수를 정확히 한 번 호출합니다.function name(selection, name) { selection.attr('name', name)}d3.select('div').call(name, 'foo')selection.empty()선택 항목에 요소가 포함되어 있지 않으면 true를 반환합니다.selection.nodes()선택 항목에 모든 요소의 배열을 반환합니다.selection[Symbol.iterator]()선택한 요소에 대..

• format_list_bulleted 시각화
• · 2024. 5. 29.
• textsms

[D3] Joining data 데이터 조인 사용법

selection.data(data, key)지정된 데이터 배열을 선택한 요소와 바인딩합니다. 요소가 4개이고 데이터 배열이 4개의 값을 가지고 있다면 각 요소는 배열의 각 값과 바인딩됩니다. 데이터 배열의 길이가 요소의 개수와 다를 경우 enter와 exit를 선택하여 부족한 요소를 생성하거나 초과된 요소를 제거할 수 있습니다. 매개변수를 사용해서 현재 데이터, 현재 인덱스, 데이터 그룹을 가집니다. 위 매개변수로 특정 요소에 연결할 수 있습니다.const data = [ {name: "Locke", number: 4}, {name: "Reyes", number: 8}, {name: "Ford", number: 15}, {name: "Jarrah", number: 16}, {name: "She..

• format_list_bulleted 시각화
• · 2024. 5. 29.
• textsms

[D3] Modifying elements를 이용하여 요소 변경하기

selection.attr(name, value)값이 지정되면 지정된 이름의 속성을 선택한 요소의 지정된 값으로 설정 후 선택 항목을 반환합니다. value가 함수일 경우 파라미터로 현재 데이터, 현재 인덱스, 현재 그룹이 전달됩니다. value가 지정되지 않은 경우 속성의 현재 값을 반환합니다.selection.classed(names, value)값이 지정된 경우 클래스 속성을 설정하거나 classList 속성을 수정하여 클래스를 할당하거나 취소하고 반환합니다.공백을 이용하여 다수의 클래스를 설정할 수 있습니다. 함수일 경우 attr과 같습니다.selection.style(name, value, priority)값이 지정되면 지정된 이름의 스타일 속성을 지정된 value로 설정하고 선택 항목을 반환합..

• format_list_bulleted 시각화
• · 2024. 5. 28.
• textsms

[D3] Selecting elements 이용하여 요소 선택하기

선택 방법에는 select와 selectAll 두 가지 형식이 있습니다. select는 일치하는 첫 번째 요소만 선택합니다. selectAll은 일치하는 모든 요소를 선택합니다.selection()root 요소인 document.documentElement를 선택합니다. prototype을 확장할 수 있습니다.d3.selection.prototype.checked = function(value) { return this.property('checked',!!value)}d3.select(checkbox).checked()select(selector)일치하는 첫 번째 요소를 선택합니다. 요소를 찾지 못하면 빈 선택 항목을 반환합니다. const svg = d3.select('#chart')문자열이 아닌경우..

• format_list_bulleted 시각화
• · 2024. 5. 28.
• textsms

[D3] interpolateRainbow를 활용한 무지개 색상표 출력

interpolateRainbow0부터 1사이의 값인 t가 주어질때 d3.js의 d3.interpolateWarm 스케일을 사용하여 0부터 0.5 범위의 따뜻한 색상을 표현하고 0.5부터 1사이의 범위는 d3.interpolateCool 스케일을 사용하여 차가운 색상을 표현합니다.  색상() " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스interpolateSinebowrainbow와 비슷한 sinebow를 표현할 수 있습니다.

• format_list_bulleted 시각화
• · 2024. 5. 27.
• textsms