D3.js 로 도표 상세 설명 만 들 기

D3 는 데이터 시각 화 에 사용 되 는 자 바스 크 립 트 라 이브 러 리 입 니 다.SVG,Canvas,HTML 을 사용 합 니 다.강력 한 시각 화 기술 과 데이터 구동 을 결합 한 DOM 조작 방법.
D3 와 JQuery 의 차이 D3 는 데이터 구동 입 니 다.JQuery 는 아 닙 니 다.저 희 는 JQuery 를 사용 하여 요 소 를 직접 조작 합 니 다.하지만 D3 를 사용 합 니 다.
D3 전용 data(),enter(),exit()방법 을 통 해 데이터 와 리 셋 을 제공 하고 D3 조작 요 소 를 제공 해 야 합 니 다.D3 는 보통 데이터 시각 화 에 사 용 됩 니 다.JQuery 는 웹 애플 리 케 이 션 을 만 드 는 데 사 용 됩 니 다.D3 에는 많은 데이터 시각 화 확장 이 있 습 니 다.JQuery 에는 웹 애플 리 케 이 션 플러그 인 이 많 습 니 다.둘 다 자 바스 크 립 트 DOM 조작 라 이브 러 리 로 CSS 선택 기와 유창 한 API 를 제공한다.
What is the difference between D3 and JQuery?
가장 상용 하 는 방법
d3.selector(selector):selector 와 일치 하 는 첫 번 째 요 소 를 선택 하 십시오.일치 하 는 요소 가 없 으 면 빈 선택 을 되 돌려 줍 니 다.(null 이나 undefined 는 아 닙 니 다.)
d3.selectAll(selector):select()와 달리 일치 하 는 모든 요 소 를 선택 합 니 다.
selection.append(type):지정 한 type 이 문자열 이 라면 이 type(태그 이름)을 선택 한 요소 의 마지막 키 요소 에 새 요소 로 추가 합 니 다.
selection.attr(name,[value]):value 가 확 정 될 때 selection 에서 name 이라는 속성 값 을 value 로 설정 합 니 다.value 는 상수 나 방법 일 수 있 습 니 다.value 가 제시 되 지 않 으 면 selection 에서 첫 번 째 비 어 있 는 요소 의 name 속성 현재 값 을 되 돌려 줍 니 다.
selection.data([data[,key]]):데이터 와 요 소 를 연결 하고 새로운 selection 을 되 돌려 줍 니 다.
selection.enter():enter selection 을 되 돌려 줍 니 다.이때 DOM 요 소 는 대응 하 는 데이터 보다 적 습 니 다.부족 한 DOM 요 소 를 추가 하 는 데 사용 합 니 다.예 를 들 면:

var div = d3.select("body")
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
  .text(function(d) { return d; });

body 가 비어 있 으 면 위의 코드 는 데이터 에 따라 새로운 div 요 소 를 만 든 다음 body 요소 에 추가 하고 텍스트 내용 을 해당 하 는 숫자 로 설정 합 니 다.페이지 결 과 는 다음 과 같 습 니 다.

 <div>4</div>
 <div>8</div>
 <div>15</div>
 <div>16</div>
 <div>23</div>
 <div>42</div>

selection.exit():exit selection 으로 돌아 갑 니 다.이때 DOM 요 소 는 대응 하 는 데이터 보다 많 습 니 다.남 은 DOM 요 소 를 제거 하 는 데 사용 합 니 다.예 를 들 어 위의 예 를 바탕 으로 우 리 는 데 이 터 를 업데이트 해 야 한다.div = div.data([1, 2, 4, 8, 16, 32], function(d) { return d; }); 이 때 key 방법(데이터 와 요소 가 일치 하 는 순서 등 을 지정 합 니 다)을 지정 하고 데이터[4,8,16]가 존재 하 는 요소 와 일치 하기 때문에 update selection 은 3 개의 div 요소 만 포함 합 니 다.enter selection 을 사용 하여 새 요 소 를 3 개 추가 할 수 있 습 니 다:div.enter().append("div").text(function(d) { return d; });그리고 불필요 한 원 소 를 제거 해 야 한다[15,23,42]:div.exit().remove(); 페이지 결과:

 <div>1</div>
 <div>2</div>
 <div>4</div>
 <div>8</div>
 <div>16</div>
 <div>32</div>

막대 그래프 를 만들다

막대 그래프 예제
D3 를 사용 할 때 SVG 의 구조 에 대해 알 아야 한다.어떤 그림 을 그 리 려 면 어떤 탭 을 사용 해 야 합 니까?탭 은 어떤 속성 을 정의 해 야 합 니까?
예 를 들 어 기둥 모양 의 그림 을 만 드 는 것 은 주로 XY 좌표 축 과 기둥 형 이다.XY 축 은 line 라벨 로 직선 을 그리고 text 라벨 로 눈금 을 표시 합 니 다.기둥 형 은 rect 라벨 로 직사각형 을 그립 니 다.원 각 을 가 진 장방형 을 그 리 려 면 rect 라벨 의 rx 나 ry 속성 을 설정 할 수 있 습 니 다.장방형 의 위 치 를 정의 하려 면 x 와 y 속성 등 을 설정 해 야 합 니 다.이렇게 일부분 의 조합 이 한 장의 그림 이 된다.
아래 의 내용 은 D3 3.x 의 API 를 바탕 으로 하고 일부 인 터 페 이 스 는 D3 4.0 과 다르다.
D3 3.x API Reference
D3 4.0 API Reference
뿌리 svg
D3 그림 을 그 리 려 면 먼저 svg 요 소 를 만 들 고 넓 은 고등 속성 을 정의 해 야 합 니 다.

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

좌표 축
좌표 축 을 만 들 려 면 먼저 D3 의 축척 이 필요 하 다.방법 axis.scale([scale])을 사용 하여 좌표 축의 비례 자 를 설정 하거나 현재 의 비례 자 를 되 돌려 줍 니 다.비례 자 는 다음 과 같이 나 뉜 다.
정량 비례 척:연속 적 인 데이터,예 를 들 어 숫자.시간 비례 자:데 이 터 는 시간 입 니 다.서수 비례 자:분 산 된 데이터,예 를 들 어 이름,유형 등.
예 를 들 어 우 리 는 시간 눈금 이 있 는 X 축 과 숫자 눈금 이 있 는 Y 축 을 만 들 려 면 시간 비례 척 과 정량 비례 척 을 사용 하거나 더욱 구체 적 으로 말 하면 선형 비례 척 을 사용 할 수 있다.
d3.scale.linear():선형 비례 자 를 만 듭 니 다.d3.time.scale():시간 비례 자 를 만 듭 니 다.눈금 과 눈금 형식 을 로 컬 시간 으로 설정 합 니 다.
비례 자 를 확정 한 후에 입력 영역 과 출력 범 위 를 설정 해 야 합 니 다.예 를 들 어 x 축의 비례 자 는 다음 과 같다.

var x = d3.time.scale()
  .range([0,       ])
  .domain(    ,     );

최소 날짜 와 최대 날 짜 는 모두 Date 대상 입 니 다.그리고 X 좌표 축의 비례 자 를 설정 하고 만 듭 니 다.

//  x   
var xAxis = d3.svg.axis()    //          
  .scale(x)    //     
  .ticks(d3.time.day, 1)   //         
  .tickFormat(function(d){  //         
    var month = d.getMonth() + 1;
    return month+' '+ d.getDate() +' ';
  })
  .tickPadding([15]) //            
  .tickSize(-height)
  .orient("bottom"); //  

ticks 의 매개 변수 유형 은 대응 하 는 비례 척 의 유형 에 달 려 있 습 니 다.여기 서 전 달 된 매개 변 수 는 시간 간격 입 니 다.즉,눈금 과 눈금 사이 가 하루 간격 이라는 것 입 니 다.
tick Format 은 눈금 의 텍스트 형식 을 사용자 정의 할 수 있 습 니 다.
특히 데이터 에서 X 축 에 대응 하 는 데이터 가 문자열 이 라면'2017-08-12'와 같다.페이지 에 연 결 된 데 이 터 는 처리 되 어야 합 니 다.D3 는 날 짜 를 분석 하 는 인터페이스 와 날짜 포맷 인 터 페 이 스 를 제공 합 니 다.
format.parse(string):문자열 string 을 날짜 로 해석 합 니 다.d3.time.format(specifier):주어진 specifier 에 따라 현지 시간 포맷 을 만 듭 니 다.
예 를 들 면:

var parseDate = d3.time.format("%Y-%m-%d").parse; //     
var date = parseDate('2017-08-12'); //         

마지막 으로 svg 요소 에 좌표 축 을 추가 합 니 다:

//  X   
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[,arguments...])방법 은 지정 한 방법 을 한 번 호출 하고 selection 을 매개 변수 와 함께 방법 에 전달 합 니 다.
기둥 모양 그림 의 직사각형.
구체 적 인 절차:데 이 터 를 페이지 요소 와 연결 시 키 고 필요 한 페이지 요 소 를 만 들 며 각 페이지 요소 의 스타일 위치 와 사건 감청 등 을 구체 적 으로 설정 합 니 다.

//       
var bars = svg.selectAll(".barRect")
  .data(ddata)  //    
  .enter().append("g")  //         
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//       
//x         
//y         
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //      
  .attr("y", function(d) {
    return y(d.value);   //         Y 
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //         X 
  })
  .attr("height", function(d) {  //     
    return height - y(d.value);
  })
  .attr('rx',10) //  
  .attr('ry',10) //  
  .attr('fill','url(#linear-gradient)'); //