d3.js
선택

통사론

• d3. 선택 (선택기)
• d3. selectAll (선택기)
• 선택 . 선택 (선택기)
• 선택 . selectAll (선택기)
• 선택 . 필터 (필터)
• 선택 . 병합 (기타)

비고

기본 선택 및 수정

jQuery와 Sizzle 구문에 익숙하다면, d3 선택 사항은 크게 다르지 않아야합니다. d3은 W3C Selectors API를 모방하여 요소와 더 쉽게 상호 작용할 수 있도록합니다.

기본 예제의 경우 <p> 모두 선택하고 각각에 변경 사항을 추가하려면 다음을 수행하십시오.

d3.selectAll('p')
  .attr('class','textClass') 
  .style('color', 'white');

요컨대 이것은 jQuery에서하는 것과 비교적 비슷하다.

$('p')
  .attr('class','textClass') 
  .css('color, 'white')

일반적으로 변수 div (일반적으로 svg라고 함)에 할당 될 SVG 요소를 추가하려면 컨테이너 div에 대한 단일 선택으로 시작해야합니다.

var svg = d3.select('#divID').append('svg');

여기에서 svg 를 호출하여 여러 객체의 하위 선택을 수행 할 수 있습니다 (아직 존재하지 않더라도).

svg.selectAll('path')

다른 선택자들

선택자가 다른 요소를 선택할 수 있습니다.

• 태그 별 : "div"
• 클래스 : ".class"
• by id : "#id"
• by 속성 : "[color=blue]"
• 다중 선택기 (OR) : "div1, div2, class1"
• 다중 선택기 (AND) : "div1 div2 class1"

단순 데이터 한정 선택

var myData = [
    { name: "test1", value: "ok" },
    { name: "test2", value: "nok" }
]

// We have to select elements (here div.samples)
// and assign data. The second parameter of data() is really important,
// it will determine the "key" to identify part of data (datum) attached to an 
// element.
var mySelection = d3.select(document.body).selectAll("div.samples") // <- a selection
                   .data(myData, function(d){ return d.name; }); // <- data binding

// The "update" state is when a datum of data array has already
// an existing element associated.
mySelection.attr("class", "samples update")

// A datum is in the "enter" state when it's not assigned
// to an existing element (based on the key param of data())
// i.e. new elements in data array with a new key (here "name")
mySelection.enter().append("div")
    .attr("class", "samples enter")
    .text(function(d){ return d.name; });

// The "exit" state is when the bounded datum of an element
// is not in the data array
// i.e. removal of a row (or modifying "name" attribute)
// if we change "test1" to "test3", "test1" bounded
//          element will figure in exit() selection
// "test3" bounded element will be created in the enter() selection
mySelection.exit().attr("class", "samples remove");

"입력"선택에서 자리 표시 자 역할

입력 선택이란 무엇입니까?

D3.js에서 DOM 요소에 데이터를 바인딩 할 때 세 가지 상황이 가능합니다.

1. 요소 수와 데이터 요소 수는 동일합니다.
2. 데이터 요소보다 많은 요소가 있습니다.
3. 요소보다 많은 데이터 요소가 있습니다.

상황 # 3에서 해당 DOM 요소가없는 모든 데이터 요소는 입력 선택에 속합니다. 따라서 D3.js에서 요소를 데이터에 조인 한 후 DOM 요소와 일치하지 않는 모든 데이터가 포함 된 입력 선택 항목을 선택합니다. 입력 선택에서 append 함수를 사용하면 D3에서 해당 데이터를 바인딩하는 새 요소를 만듭니다.

이것은 Venn 다이어그램으로 데이터 요소 수 / DOM 요소 수에 관한 가능한 상황을 설명합니다.

보시다시피 입력 선택은 왼쪽의 파란색 영역입니다. 해당 DOM 요소가없는 데이터 요소입니다.

입력 선택의 구조

일반적으로 입력 선택에는 다음과 같은 4 단계가 있습니다.

1. selectAll : DOM에서 요소를 선택하십시오.
2. data : data 센다.
3. enter : 선택 항목을 데이터와 비교하여 새 요소를 만듭니다.
4. append : DOM에 실제 요소를 추가합니다.

이것은 매우 기본적인 예입니다 ( var divs 의 4 단계 참조).

var data = [40, 80, 150, 160, 230, 260];

var body = d3.select("body");

var divs = body.selectAll("div")
    .data(data)
    .enter()
    .append("div");

divs.style("width", function(d) { return d + "px"; })
    .attr("class", "divchart")
    .text(function(d) { return d; });

그리고 이것은 결과입니다 ( 여기서 jsfiddle ) :

이 경우 우리는 "enter"선택 변수의 첫 번째 줄에 selectAll("div") 을 사용했습니다. 우리는 6 개의 값을 갖는 데이터 셋을 가지고 있으며, D3는 6 개의 div를 생성했습니다.

자리 표시 자의 역할

그러나 우리 문서에 div가 이미 있다고 가정 해 봅시다. <div>This is my chart</div> . 이 경우, 우리가 쓸 때 :

body.selectAll("div")

우리는 존재하는 div를 선택합니다. 따라서 입력 선택에는 일치하는 요소가없는 5 개의 데이텀 만 있습니다. 예를 들어, 이 jsfiddle 에서 HTML에 div가 이미있는 경우 ( "This is my chart") 결과가됩니다.

우리는 더 이상 "40"이라는 값을 보지 못합니다. 첫 번째 "막대"가 사라졌으며, 그 이유는 "Enter"선택에 이제 5 개의 요소 만 있다는 것입니다.

여기서 우리가 알아야 할 것은 입력 선택 변수 인 selectAll("div") 의 첫 번째 줄에서 해당 div는 단지 자리 표시 자임을 알 수 있습니다. 우리는 모든 선택하지 않아도 divs 우리가 추가되는 경우 divs , 또는 모든 circle 우리가 추가되는 경우 circle . 우리는 다른 것을 선택할 수 있습니다. 그리고 "업데이트"또는 "종료"선택을하지 않으려는 경우 다음을 선택할 수 있습니다 .

var divs = body.selectAll(".foo")//this class doesn't exist, and never will!
    .data(data)
    .enter()
    .append("div");

이렇게하면 모든 ".foo"가 선택됩니다. 여기에서 "foo"는 존재하지 않을뿐만 아니라 코드의 다른 곳에서도 결코 생성되지 않는 클래스입니다! 그러나 중요하지 않습니다. 이것은 단지 자리 표시 자일뿐입니다. 논리는 다음과 같습니다.

"enter"선택에서 존재하지 않는 것을 선택하면 "enter"선택 항목에는 항상 모든 데이터가 포함됩니다.

이제 .foo 선택하면 문서에 div가 이미있는 경우에도 "Enter"선택 항목에는 6 개의 요소가 있습니다.

여기에 해당 하는 jsfiddle이 있습니다.

null 선택

지금까지 아무 것도 선택하지 않도록 보장하는 가장 좋은 방법은 null 선택하는 것입니다. 뿐만 아니라이 대안은 다른 어떤 것보다 훨씬 빠릅니다.

따라서 입력 선택의 경우 다음을 수행하십시오.

selection.selectAll(null)
    .data(data)
    .enter()
    .append(element);

데모 바이올린은 다음과 같습니다. https://jsfiddle.net/gerardofurtado/th6s160p/

결론

"입력"선택 사항을 다룰 때, 이미 존재하는 것을 선택하지 않도록 각별히주의하십시오. selectAll 에는 존재하지 않으며 결코 존재하지 않는 것 ( "업데이트"또는 "종료"선택이없는 경우)을 포함하여 모든 것을 사용할 수 있습니다.

예제 코드는 Mike Bostock이 작성한 코드를 기반으로합니다. https://bl.ocks.org/mbostock/7322386

화살표 함수와 함께 "this"사용하기

D3.js의 대부분의 함수는 익명 함수를 인수로받습니다. 일반적인 예는 .attr , .style , .text , .on 및 .data 있지만 목록보다 더 큰 방법이다.

이 경우 익명 함수는 선택된 각 요소에 대해 순서대로 평가됩니다.

1. 현재 데이텀 ( d )
2. 현재 색인 ( i )
3. 현재 그룹 ( nodes )
4. this 현재 DOM 요소입니다.

데이터, 인덱스 및 현재 그룹은 D3.js의 유명한 첫 번째, 두 번째 및 세 번째 인수 (D3 v3.x에서 전통적으로 d , i 및 p 로 명명 된 매개 변수)로 인수로 전달됩니다. 그러나 this 사용하려면 인수를 사용할 필요가 없습니다.

.on("mouseover", function(){
    d3.select(this);
});

위의 코드는 마우스가 요소 위에있을 때이 코드를 선택 this . 이 바이올린에서 작동하는지 확인하십시오 : https://jsfiddle.net/y5fwgopx/

화살표 기능

새로운 ES6 구문으로서 화살표 함수는 함수 표현식과 비교할 때 구문이 더 짧습니다. 그러나 this 지속적으로 사용하는 D3 프로그래머에게는 함정이 있습니다. 화살표 함수는 this 컨텍스트를 자체 생성하지 않습니다. 즉, 화살표 함수에서 this 둘러싸는 컨텍스트에서 원래의 의미를 가짐을 의미합니다.

이것은 여러 상황에서 유용 할 수 있지만 D3에서 this 사용하는 데 익숙한 코더에게는 문제가됩니다. 예를 들어, 위의 예제에서 같은 예제를 사용하면 다음과 같이 작동하지 않습니다.

.on("mouseover", ()=>{
    d3.select(this);
});

당신이 그것을 의심한다면, 여기에 바이올린이 있습니다 : https://jsfiddle.net/tfxLsv9u/

음, 큰 문제는 아닙니다. 필요할 때마다 규칙적인 구식 함수 식을 간단히 사용할 수 있습니다. 그러나 화살표 함수를 사용하여 모든 코드를 작성하려면 어떻게해야합니까? 화살표 기능을 가진 코드를 가지고 있으며 여전히 D3에서 this 올바르게 사용할 수 있습니까?

두 번째 및 세 번째 인수 결합

때문에 대답은 '예'입니다 this 의 동일 nodes[i] . 힌트는 D3 API 전체에 실제로 설명됩니다.

... this 현재 DOM 요소 ( nodes[i] )로 사용하면

설명은 간단합니다 : nodes 는 DOM의 현재 요소 그룹이고 i 는 각 요소의 색인이므로 nodes[i] 는 현재 DOM 요소 자체를 참조합니다. 즉, this .

따라서 다음을 사용할 수 있습니다.

.on("mouseover", (d, i, nodes) => {
    d3.select(nodes[i]);
});

그리고 여기에 해당하는 바이올린이 있습니다 : https://jsfiddle.net/2p2ux38s/