[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 D3/시각화
• · 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 D3/시각화
• · 2024. 5. 29.
• textsms

[D3] Handling events 사용법

selection.on(typenames, listener, options)선택된 각 요소에 대해 지정된 이벤트 유형에 대한 리스너를 추가하거나 제거합니다.typenames: 이벤트 유형 문자열로 click, mouseover, submit 등 DOM 이벤트 유형을 지정합니다. 공백으로 여러 이벤트를 지정할 수 있습니다. 그리고 (.)을 이용하여 eventListener에게 name을 설정할 수 있습니다.listener: 이벤트가 발생할 때 호출될 함수입니다. 현재 이벤트와 데이터를 인자로 받습니다.options: 선택사항으로 이벤트 리스너의 특징을 지정하는 객체입니다.// 이벤트 리스너 추가d3.selectAll("p").on("click", (event) => console.log(event));//..

• format_list_bulleted D3/시각화
• · 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 D3/시각화
• · 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 D3/시각화
• · 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 D3/시각화
• · 2024. 5. 28.
• textsms