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
};
이러한 "변화하는 부분"에는 다음이 포함됩니다.
- 진입, 갱신 및 퇴장 선택;
- 각 척도의 영역.
- 축의 전환;
그 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; });
이제 "입력"및 "업데이트"선택 항목을 병합했습니다. 이 라이브 데모 에서 작동 방식을 확인하십시오.