DC.js-라인 차트
선형 차트는 정보를 직선으로 연결된 일련의 데이터 포인트로 표시하는 데 사용됩니다. 데이터 포인트는 두 개의 값을 나타냅니다. 하나는 가로 축을 따라 그리고 다른 하나는 세로 축을 따라 그려집니다. 예를 들어, 음식 항목이 x 축을 따라 표시되고 인기가 y 축을 따라 표시되는 방식으로 음식 항목의 인기도를 선 차트로 그릴 수 있습니다. 이 장에서는 라인 차트에 대해 자세히 설명합니다.
라인 차트 방법
꺾은 선형 차트를 그리기 전에 다음 사항을 이해해야합니다. dc.lineChart클래스 및 메서드. dc.lineChart는 믹스 인을 사용하여 차트를 그리는 기본 기능을 얻습니다. dc.lineChart에서 사용하는 믹스 인은 다음과 같습니다.
- dc.stackMixin
- dc.coordinateGridMixin
dc.lineChart의 전체 클래스 다이어그램은 다음과 같습니다.
dc.lineChart는 위에서 지정한 믹스 인의 모든 메서드를 가져 오며 선 차트를 그리는 자체 메서드도 있습니다. 다음과 같이 설명합니다.
dashStyle ([스타일])
이 방법은 꺾은 선형 차트의 대시 스타일을 설정하는 데 사용됩니다.
dotRadius ([반지름])
이 방법은 데이터 포인트에 표시되는 점의 반경 (PX)을 가져 오거나 설정하는 데 사용됩니다. 다음과 같이 정의됩니다-
chart.dotRadius = function (radius) {
if (!arguments.length) {
return radius;
}
};보간 ([i])
이 메서드는 라인에 대한 보간기를 가져 오거나 설정하는 데 사용됩니다.
renderArea ([area])
이 메서드는 렌더링 영역을 가져 오거나 설정하는 데 사용됩니다.
renderDataPoints ([옵션])
이 방법은 각 데이터 포인트에 대한 개별 점을 렌더링하는 데 사용됩니다.
장력 ([긴장])
이 방법은 그려진 선의 장력을 가져 오거나 설정하는 데 사용됩니다. 0에서 1 사이의 범위입니다.
xyTipsOn ([xyTipsOn])
이 메서드는 개별 데이터 포인트의 마우스 동작을 변경하는 데 사용됩니다.
라인 차트 그리기
DC에서 선 차트를 그리겠습니다. 이렇게하려면 아래 단계를 따라야합니다.
1 단계 : 변수 정의
아래와 같이 변수를 정의하겠습니다.
var chart = dc.lineChart('#line');여기서 dc.linechart 함수는 id line.
2 단계 : 데이터 읽기
데이터 읽기 people.csv 파일-
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}여기서 동일한 데이터 세트 people.csv를 사용하면 샘플 데이터 파일은 다음과 같습니다.
id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay
...............
................
................3 단계 : 연령 측정 기준 만들기
이제 아래와 같이 나이에 대한 차원을 만듭니다.
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});여기서는 Crossfilter 데이터에서 나이를 할당했습니다.
~~는 이중 NOT 비트 연산자입니다. 더 빠른 대체물로 사용됩니다.Math.floor() 함수.
이제 reduceCount() 아래에 정의 된 함수-
var ageGroup = ageDimension.group().reduceCount();4 단계 : 차트 생성
이제 아래에 주어진 코딩을 사용하여 라인 차트를 생성하십시오.
chart
.width(800)
.height(300)
.x(d3.scale.linear().domain([15,70]))
.brushOn(false)
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(ageGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
chart.render();여기,
차트 너비는 800이고 높이는 300입니다.
d3.scale.linear 함수는 지정된 도메인 범위 [15, 70]로 새로운 선형 척도를 생성하는 데 사용됩니다.
다음으로 brushOn 값을 false로 설정합니다.
y 축 레이블을 다음과 같이 할당합니다. count x 축 레이블은 age.
마지막으로 ageGroup.
5 단계 : 작업 예
전체 코드 목록은 다음 코드 블록에 나와 있습니다. 웹 페이지 만들기line.html 다음 변경 사항을 추가하십시오.
<html>
<head>
<title>DC.js Line Chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "line"></div>
</div>
<script language = "javascript">
var chart = dc.lineChart('#line');
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(800)
.height(300)
.x(d3.scale.linear().domain([15,70]))
.brushOn(false)
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(ageGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
chart.render();
});
</script>
</body>
</html>이제 브라우저를 요청하면 다음과 같은 응답이 표시됩니다.