[D3.js] table+getbootstrap 결합

codingman (64)in #dclick • 6 years ago (edited)

[D3.js] table+getbootstrap 결합

getbootstrap table : https://getbootstrap.com/docs/4.1/content/tables/
table :
[D3.js] table 시각화
[D3.js] table 정렬 시각화
[D3.js] table+getbootstrap 결합

지난 시간에 table 정렬까지 해보았는데 table 스타일이 좀 멋이 없어서 CSS 코딩을 쭉 하려다가 오래 전 getbootstrap.min.css가 생각이 나서 이걸 같이 합쳐서 좀 멋진 테이블일 만들어 보고 싶어서 CSS코딩은 접고 getbootstrap를 이용한 table에 대해 post를 마무리 할까 합니다.

1. getbootstrap

홈페이지 주소 : https://getbootstrap.com/

getbootstrap CSS은 다양한 HTML의 시각화 스타일을 자동을 만들어 줍니다. 즉, 여러분들은 뭘 만들지 그 로직만 짜고 겉 모습은 getbootstrap에서 멋지게 디자인 해준다라고 생각하시며 될 듯 싶네요.

링크 :

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

딱 한줄 외부 링크 주소만 만들어 주면 끝납니다.

그리고 테이블이니깐 다음과 같이 코딩하면 끝!

<table class="table"> ... </table>

이렇게 코딩하면 간단한 기본 스타일 테이블이 완성 됩니다. table이란 이름의 클래스명을 가진 table의 스타일을 bootstrap.min.css에서 이미 만들어 놓았기 때문에 기본 테이블이지만 멋지게 출력이 됩니다.

그럼 table을 지난 시간에 table 정렬 시각화한 예제에 적용해 볼까요.

2. table + getbootstrap 시각화

[D3.js] table 정렬 시각화
getbootstrap table : https://getbootstrap.com/docs/4.1/content/tables/

[data.csv]

name,kor,eng,mat
a,90,90,90
b,70,100,70
c,50,60,95

[table 정렬 소스]

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<body>
<style>
     table {
        width: 100%;    
      }
      table, th, td {
        border: 1px solid #ff00bc;
    text-align:center;
    font-weight:bold;
      }
</style>        
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
d3.csv("data.csv").then(function(data){
      var sortstate = true;          
      var title = d3.keys(data[0]); 

      var table = d3.select('body').append('table');
      var thead = table.append('thead');
      var tbody = table.append('tbody');

      var header = thead.append('tr')
                       .selectAll('th')
                       .data(title).enter()
                       .append('th')
                       .text(function (d) {return d;})
                       .on('click', function (d) {
                          if (sortstate) {
                              rows.sort(function(a, b) { return b[d] > a[d]; });
                              sortstate = false;
                          } else {
                              rows.sort(function(a, b) { return b[d] < a[d]; });
                              sortstate = true;
                          }
                       });
          
     var rows = tbody.selectAll('tr').data(data)
                     .enter()
                     .append('tr');

     var cells =  rows.selectAll('td')
                      .data(function (d) {
                               return title.map(function (title) {
                                     return { 'title': title, 'value': d[title]};
                               });
                      })
                      .enter()
                      .append('td')
                      .text(function (d) { return d.value;});
});
</script>
</body>

여기서 위 css 코딩은 다 삭제합니다. 그리고 이 한줄을 삽입합니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

그 다음으로 table을 기본 속성의 테이블로 출력하기 때문에 이부분을 수정합니다.

var table = d3.select('body').append('table');

위에서 attr()함수로 한개만 class명을 지정해주면 끝납니다.

var table = d3.select('body').append('table')
              .attr("class","table");

끝! 더이상 할 것이 없네요.

[table 정렬 소스+getbootstrap]

<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>

<script type="text/javascript">
d3.csv("data.csv").then(function(data){
      var sortstate = true;          
      var title = d3.keys(data[0]); 

      var table = d3.select('body').append('table')
                     .attr("class","table");
      var thead = table.append('thead');
      var tbody = table.append('tbody');

      var header = thead.append('tr')
                       .selectAll('th')
                       .data(title).enter()
                       .append('th')
                       .text(function (d) {return d;})
                       .on('click', function (d) {
                          if (sortstate) {
                              rows.sort(function(a, b) { return b[d] > a[d]; });
                              sortstate = false;
                          } else {
                              rows.sort(function(a, b) { return b[d] < a[d]; });
                              sortstate = true;
                          }
                       });
          
     var rows = tbody.selectAll('tr').data(data)
                     .enter()
                     .append('tr');

     var cells =  rows.selectAll('td')
                      .data(function (d) {
                               return title.map(function (title) {
                                     return { 'title': title, 'value': d[title]};
                               });
                      })
                      .enter()
                      .append('td')
                      .text(function (d) { return d.value;});
});
</script>
</body>

[결과]
기본 스타일이지만 뭔가 깔끔해 졌죠. 클릭 시 정렬도 잘되고요.

3. 추가 스타일

스타일 변경은 쉽습니다. table, thead, tbody, tr, td 각 태그에 클래스명만 getbootstrap에서 제공되는 이름으로 지정만 해주시면 됩니다.

var table = d3.select('body').append('table')
            .attr("class","table table-dark");

[결과]

var table = d3.select('body').append('table')
            .attr("class","table table-striped");

var thead = table.append('thead')
            .attr("class","thead-dark");

[결과]