d3.js
패턴 업데이트

통사론

• selection.enter ()
• selection.exit ()
• selection.merge ()

데이터 업데이트 : 입력, 업데이트 및 이탈 선택의 기본 예

정적 데이터 세트를 표시하는 차트를 만드는 것은 비교적 간단합니다. 예를 들어 데이터의 배열이이 데이터의 경우 :

var data = [
    {title: "A", value: 53},
    {title: "B", value: 12},
    {title: "C", value: 91},
    {title: "D", value: 24},
    {title: "E", value: 59}
];

각 막대는 "제목"이라는 측정 값을 나타내고 막대의 너비는 해당 측정 값을 나타냅니다. 이 데이터 세트는 변경되지 않으므로 막대 차트에는 "입력"선택 항목 만 있습니다.

var bars = svg.selectAll(".bars")
    .data(data);

bars.enter()
    .append("rect")
    .attr("class", "bars")
    .attr("x", xScale(0))
    .attr("y", function(d){ return yScale(d.title)})
    .attr("width", 0)
    .attr("height", yScale.bandwidth())
    .transition()
    .duration(1000)
    .delay(function(d,i){ return i*200})
    .attr("width", function(d){ return xScale(d.value) - margin.left});

여기서는 각 막대의 너비를 0으로 설정하고 전환 후 최종 값으로 설정합니다.

이 입력 선택 만으로도이 피들에서 볼 수있는 차트를 만들 수 있습니다.

그러나 내 데이터가 변경되면 어떻게됩니까?

이 경우 차트를 동적으로 변경해야합니다. 가장 좋은 방법은 "입력", "업데이트"및 "종료"선택 항목을 만드는 것입니다. 그러나 그 전에 코드에서 몇 가지 변경 작업을 수행해야합니다.

먼저, 변경하는 부분을 draw() 라는 함수 내로 옮깁니다.

function draw(){
    //changing parts
};

이러한 "변화하는 부분"에는 다음이 포함됩니다.

1. 진입, 갱신 및 퇴장 선택;
2. 각 척도의 영역.
3. 축의 전환;

그 draw() 함수 안에서 우리는 데이터를 생성하는 다른 함수를 호출합니다. 여기서는 5 개의 객체 배열을 반환하는 함수입니다. 알파벳 10 개 중 5 개의 문자를 임의로 선택하고 각각에 대해 0에서 99 사이의 값을 선택합니다.

function getData(){
    var title = "ABCDEFGHIJ".split("");
    var data = [];
    for(var i = 0; i < 5; i++){
        var index = Math.floor(Math.random()*title.length);
        data.push({title: title[index],
            value: Math.floor(Math.random()*100)});
        title.splice(index,1);
    }
    data = data.sort(function(a,b){ return d3.ascending(a.title,b.title)});
    return data;
};

이제 선택 항목으로 이동하십시오. 하지만 그 전에주의 할 점은 객체 불변성 (object constancy) 을 유지하기 위해 selection.data의 두 번째 인수로 주요 함수를 지정해야한다는 것입니다.

var bars = svg.selectAll(".bars")
    .data(data, function(d){ return d.title});

그것 없이는 막대가 부드럽게 전환되지 않으며 축의 변경 사항을 따르기가 어려울 것입니다 (아래에서 두 번째 인수를 제거하면 볼 수 있습니다).

따라서 var bars 올바르게 설정 한 후에는 선택 항목을 처리 할 수 ​​있습니다. 다음은 출구 선택입니다.

bars.exit()
    .transition()
    .duration(1000)
    .attr("width", 0)
    .remove();

그리고 이것들은 엔터와 업데이트 선택입니다 (D3 v4.x에서는 병합을 사용하여 업데이트 선택이 엔터 선택과 merge ) :

bars.enter()//this is the enter selection
    .append("rect")
    .attr("class", "bars")
    .attr("x", xScale(0) + 1)
    .attr("y", function(d){ return yScale(d.title)})
    .attr("width", 0)
    .attr("height", yScale.bandwidth())
    .attr("fill", function(d){ return color(letters.indexOf(d.title)+1)})
    .merge(bars)//and from now on, both the enter and the update selections
    .transition()
    .duration(1000)
    .delay(1000)
    .attr("y", function(d){ return yScale(d.title)})
    .attr("width", function(d){ return xScale(d.value) - margin.left});

마지막으로 버튼을 클릭 할 때마다 draw() 함수를 호출합니다.

d3.select("#myButton").on("click", draw);

그리고 이것은 이 세 가지 선택을 모두 보여주는 바이올린 입니다.

병합 선택

D3 버전 3의 업데이트 패턴

"입력", "업데이트"및 "종료"선택이 어떻게 작동하는지에 대한 올바른 이해는 D3을 사용하여 데이터 비트를 적절히 변경하기위한 기본 사항입니다.

D3 버전 3 이후 (실제로는 버전 2 이후)이 스 니펫은 "입력"및 "업데이트"선택 사항 ( 여기에서 라이브 데모 )에 대한 전환을 설정할 수 있습니다 .

var divs = body.selectAll("div")
    .data(data);//binding the data

divs.enter()//enter selection
    .append("div")
    .style("width", "0px");

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

전환 후이 결과 제공 :

D3 버전 4를 사용하면 정확히 동일한 코드가 어떻게됩니까? 이 라이브 데모 에서 볼 수 있습니다 : 아무것도 !

왜?

D3 버전 4의 업데이트 패턴 변경

코드를 확인해 봅시다. 첫째, divs 있습니다. 이 선택은 데이터를 <div> 바인드합니다.

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

그런 다음 divs.enter() 가 있습니다. divs.enter() 는 일치하지 않는 요소가있는 모든 데이터가 포함 된 선택 항목입니다. 이 선택 항목에는 처음으로 함수를 draw 모든 div가 포함되며 폭을 0으로 설정합니다.

divs.enter()
    .append("div")
    .style("width", "0px");

divs.transition() 은 divs.transition() 을 가지고 있으며 흥미로운 동작을합니다. D3 버전 3에서 divs.transition() 은 "enter"선택의 모든 <div> 를 최종 너비로 변경합니다. 하지만 그건 말이 안돼! divs 에는 '입력'선택 항목이 없으므로 DOM 요소를 수정해서는 안됩니다.

이 이상한 동작이 D3 버전 2 및 3 ( 여기에있는 소스 )에서 도입되었으며 D3 버전 4에서 "수정되었습니다"라는 이유가 있습니다. 따라서 위의 라이브 데모에서는 아무 일도 발생하지 않으며 예상됩니다! 또한 버튼을 클릭하면 "업데이트"선택 항목에 있기 때문에 이전의 6 개의 막대가 모두 나타나며 "입력"선택 항목에는 더 이상 표시되지 않습니다.

"엔터 (enter)"선택을 통해 전환하는 전환의 경우 선택 항목을 병합 하거나 더 쉬운 방법 인 선택을 병합해야합니다 .

divs.enter()//enter selection
    .append("div")
    .style("width", "0px")
    .merge(divs)//from now on, enter + update selections
    .transition().duration(1000).style("width", function(d) { return d + "px"; })
    .attr("class", "divchart")
    .text(function(d) { return d; });

이제 "입력"및 "업데이트"선택 항목을 병합했습니다. 이 라이브 데모 에서 작동 방식을 확인하십시오.