D3.js-작업 예제

이 장에서는 애니메이션 막대 차트를 수행해 보겠습니다. 이 예에서는 모집단 레코드의 이전 장에서 사용 된 data.csv 파일을 데이터 세트로 사용하고 애니메이션 막대 차트를 생성합니다.

이렇게하려면 다음 단계를 수행해야합니다.

Step 1 − Apply styles − 아래 코드를 사용하여 CSS 스타일을 적용합니다.

<style>
   .bar {
      fill: green;
   }
   
   .highlight {
      fill: red;
   }
   
   .title {
      fill: blue;
      font-weight: bold;
   }
</style>

Step 2 − Define variables − 아래 스크립트를 사용하여 SVG 속성을 정의하겠습니다.

<script>
   var svg = d3.select("svg"), margin = 200,
   width = svg.attr("width") - margin,
   height = svg.attr("height") - margin;
</script>

Step 3 − Append text − 이제 텍스트를 추가하고 아래 코딩을 사용하여 변환을 적용합니다.

svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 50)
   .attr("y", 50)
   .attr("font-size", "20px")
   .attr("class", "title")
   .text("Population bar chart")

Step 4 − Create scale range−이 단계에서 스케일 범위를 생성하고 그룹 요소를 추가 할 수 있습니다. 아래에 정의되어 있습니다.

var x = d3.scaleBand().range([0, width]).padding(0.4),
   y = d3.scaleLinear()
      .range([height, 0]);
   var g = svg.append("g")
      .attr("transform", "translate(" + 100 + "," + 100 + ")");

Step 5 − Read data − 우리는 이미 data.csv이전 예제에서 파일. 여기에서 사용한 동일한 파일입니다.

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

이제 아래 코드를 사용하여 위 파일을 읽으십시오.

d3.csv("data.csv", function(error, data) {
   if (error) {
      throw error;
   }

Step 6 − Set domain − 이제 아래 코딩을 사용하여 도메인을 설정합니다.

x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

Step 7 − Add X-axis− 이제 변환에 X 축을 추가 할 수 있습니다. 아래와 같습니다.

g.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x)).append("text")
   .attr("y", height - 250).attr("x", width - 100)
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("year");

Step 8 − Add Y-axis − 아래 주어진 코드를 사용하여 변환에 Y 축을 추가합니다.

g.append("g")
   .append("text").attr("transform", "rotate(-90)")
   .attr("y", 6).attr("dy", "-5.1em")
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("population");

Step 9 − Append group elements − 이제 그룹 요소를 추가하고 아래 정의 된대로 Y 축에 변환을 적용합니다.

g.append("g")
   .attr("transform", "translate(0, 0)")
   .call(d3.axisLeft(y))

Step 10 − Select the bar class − 이제 아래 정의 된 바와 같이 바 클래스의 모든 요소를 ​​선택합니다.

g.selectAll(".bar")
   .data(data).enter()
   .append("rect")
   .attr("class", "bar")
   .on("mouseover", onMouseOver) 
   .on("mouseout", onMouseOut)
   .attr("x", function(d) { return x(d.year); })
   .attr("y", function(d) { return y(d.population); })
   .attr("width", x.bandwidth())
   .transition()
   .ease(d3.easeLinear)
   .duration(200)
   .delay(function (d, i) {
      return i * 25;
   })
   .attr("height", function(d) { return height - y(d.population); });
});

여기에서 애니메이션을 수행하기 위해 mouseout 및 mouseover에 대한 리스너 이벤트를 추가했습니다. 마우스가 특정 막대 위로 이동하여 빠져 나갈 때 애니메이션을 적용합니다. 이러한 기능은 다음 단계에서 설명합니다.

그만큼 .ease(d3.easeLinear)기능은 애니메이션에서 명백한 동작을 수행하는 데 사용됩니다. 200의 지속 시간으로 슬로우 인 및 슬로우 아웃 모션을 처리합니다. 지연은 다음을 사용하여 계산할 수 있습니다.

.delay(function (d, i) {
   return i * 25;
})

Step 11 − Mouseover event handler function − 아래와 같이 마우스 이벤트를 처리하기위한 mouseover 이벤트 핸들러를 생성 해 보겠습니다.

function onMouseOver(d, i) {
   d3.select(this)
      .attr('class', 'highlight');
   d3.select(this)
      .transition()
      .duration(200)
      .attr('width', x.bandwidth() + 5)
      .attr("y", function(d) { return y(d.population) - 10; })
      .attr("height", function(d) { return height - y(d.population) + 10; });
   g.append("text")
      .attr('class', 'val') 
   
   .attr('x', function() {
      return x(d.year);
   })
   
   .attr('y', function() {
      return y(d.value) - 10;
   })
}

여기에서 mouseover 이벤트에서 막대 너비와 높이를 늘리고 선택한 막대의 막대 색상을 빨간색으로 늘리려 고합니다. 색상의 경우 선택한 막대의 색상을 빨간색으로 변경하는 'highlight'클래스를 추가했습니다.

200 밀리 초 동안 막대로 전환하는 기능입니다. 막대의 너비를 5px, 높이를 10px 늘리면 막대의 이전 너비와 높이에서 새 너비와 높이로의 전환은 200 밀리 초 동안 지속됩니다.

다음으로 새로운 높이 값으로 인해 막대가 왜곡되지 않도록 막대에 대한 새로운 'y'값을 계산했습니다.

Step 12 − Mouseout event handler function− 마우스 이벤트를 처리하기 위해 mouseout 이벤트 핸들러를 생성 해 보겠습니다. 아래에 정의되어 있습니다.

function onMouseOut(d, i) {
   d3.select(this).attr('class', 'bar');
   
   d3.select(this)
      .transition()     
      .duration(400).attr('width', x.bandwidth())
      .attr("y", function(d) { return y(d.population); })
      .attr("height", function(d) { return height - y(d.population); });
   
   d3.selectAll('.val')
      .remove()
}

여기서 mouseout 이벤트에서 mouseover 이벤트에서 적용한 선택 기능을 제거하려고합니다. 따라서 bar 클래스를 원래 'bar'클래스로 되돌리고 선택한 막대의 원래 너비와 높이를 복원하고 y 값을 원래 값으로 복원합니다.

그만큼 d3.selectAll(‘.val’).remove() 함수는 막대 선택 중에 추가 한 텍스트 값을 제거하는 데 사용됩니다.

Step 13 − Working Example− 전체 프로그램은 다음 코드 블록에 나와 있습니다. 웹 페이지 만들기animated_bar.html 다음 변경 사항을 추가하십시오.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .bar {
            fill: green;
         }
        
         .highlight {
            fill: red;
         }
         
         .title {
            fill: blue;
            font-weight: bold;
         }
      </style>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <title> Animated bar chart </title>
   </head>

   <body>
      <svg width = "500" height = "500"></svg>
      <script>
         var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;
         
         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")
            
         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);
            
         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("data.csv", function(error, data) {
            if (error) {
               throw error;
            }
               
            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);
                     
            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");
               
            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");
                         
            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver) 
               .on("mouseout", onMouseOut)   
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })
                  
            .attr("height", function(d) { return height - y(d.population); });
         });
          
          
         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');
               
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });
              
            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })
               
            .attr('y', function() {
               return y(d.value) - 10;
            })
         }
          
         function onMouseOut(d, i) {
             
            d3.select(this)
               .attr('class', 'bar');
            
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });
            
            d3.selectAll('.val')
               .remove()
         }
      </script>
   </body>
</html>

이제 브라우저를 요청하면 다음과 같은 응답이 표시됩니다.

막대를 선택하면 빨간색으로 강조 표시됩니다. D3는 데이터의 정보, 문서, 요소 등으로의 변환을 처리하고 궁극적으로 데이터 시각화를 만드는 데 도움이되는 범용 시각화 라이브러리입니다.