D3.js - Vẽ Biểu đồ
D3.js được sử dụng để tạo biểu đồ SVG tĩnh. Nó giúp vẽ các biểu đồ sau:
- Biểu đồ cột
- Biểu đồ hình tròn
- Biểu đồ tròn
- Biểu đồ bánh rán
- Biểu đồ đường
- Biểu đồ bong bóng, v.v.
Chương này giải thích về cách vẽ biểu đồ trong D3. Hãy để chúng tôi hiểu chi tiết từng điều này.
Biểu đồ cột
Biểu đồ thanh là một trong những loại biểu đồ được sử dụng phổ biến nhất và được sử dụng để hiển thị và so sánh số lượng, tần suất hoặc các thước đo khác (ví dụ: trung bình) cho các danh mục hoặc nhóm rời rạc khác nhau. Biểu đồ này được xây dựng theo cách mà chiều cao hoặc chiều dài của các thanh khác nhau tỷ lệ với kích thước của danh mục mà chúng đại diện.
Trục x (trục hoành) đại diện cho các danh mục khác nhau mà nó không có tỷ lệ. Trục y (trục tung) không có tỷ lệ và điều này cho biết các đơn vị đo lường. Các thanh có thể được vẽ theo chiều dọc hoặc chiều ngang tùy thuộc vào số lượng danh mục và độ dài hoặc độ phức tạp của danh mục.
Vẽ biểu đồ thanh
Hãy để chúng tôi tạo biểu đồ thanh trong SVG bằng D3. Đối với ví dụ này, chúng ta có thể sử dụngrect elements cho các thanh và text elements để hiển thị các giá trị dữ liệu của chúng tôi tương ứng với các thanh.
Để tạo biểu đồ thanh trong SVG bằng D3, chúng ta hãy làm theo các bước dưới đây.
Step 1 - Adding style in the rect element - Hãy để chúng tôi thêm kiểu sau vào phần tử trực tràng.
svg rect {
fill: gray;
}
Step 2 - Add styles in text element- Thêm lớp CSS sau để áp dụng kiểu cho giá trị văn bản. Thêm kiểu này vào phần tử văn bản SVG. Nó được định nghĩa dưới đây -
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
Ở đây, Fill được sử dụng để áp dụng màu sắc. Văn bản neo được sử dụng để định vị văn bản về phía cuối bên phải của các thanh.
Step 3 - Define variables- Hãy để chúng tôi thêm các biến trong script. Nó được giải thích dưới đây.
<script>
var data = [10, 5, 12, 15];
var width = 300,
scaleFactor = 20,
barHeight = 30;
</script>
Đây,
Width - Chiều rộng của SVG.
Scalefactor - Được chia tỷ lệ thành giá trị pixel có thể nhìn thấy trên màn hình.
Barheight - Đây là chiều cao tĩnh của các thanh ngang.
Step 4 - Append SVG elements - Hãy để chúng tôi nối các phần tử SVG trong D3 bằng đoạn mã sau.
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
Ở đây, trước tiên chúng ta sẽ chọn phần thân tài liệu, tạo một phần tử SVG mới và sau đó nối nó vào. Chúng tôi sẽ xây dựng biểu đồ thanh bên trong phần tử SVG này. Sau đó, đặt chiều rộng và chiều cao của SVG. Chiều cao được tính bằng chiều cao thanh * số giá trị dữ liệu.
Chúng tôi đã lấy chiều cao thanh là 30 và chiều dài mảng dữ liệu là 4. Sau đó, chiều cao SVG được tính là chiều cao * chiều dài dữ liệu là 120 px.
Step 5 - Apply transformation - Hãy để chúng tôi áp dụng chuyển đổi trong thanh bằng cách sử dụng mã sau.
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
Ở đây, mỗi thanh bên trong tương ứng với một phần tử. Do đó, chúng tôi tạo ra các phần tử nhóm. Mỗi phần tử nhóm của chúng ta cần được đặt ở vị trí bên dưới phần tử kia để tạo biểu đồ thanh ngang. Hãy để chúng tôi lấy một chỉ số công thức chuyển đổi * chiều cao thanh.
Step 6 - Append rect elements to the bar- Trong bước trước, chúng ta đã nối các phần tử nhóm. Bây giờ thêm các phần tử trực tràng vào thanh bằng cách sử dụng mã sau.
bar.append("rect")
.attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
Ở đây, chiều rộng là (giá trị dữ liệu * hệ số tỷ lệ) và chiều cao là (chiều cao thanh - lề).
Step 7 - Display data- Đây là bước cuối cùng. Hãy để chúng tôi hiển thị dữ liệu trên mỗi thanh bằng cách sử dụng mã sau.
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
Ở đây, chiều rộng được định nghĩa là (giá trị dữ liệu * hệ số quy mô). Các phần tử văn bản không hỗ trợ đệm hoặc lề. Vì lý do này, chúng ta cần cung cấp cho nó một phần bù “dy”. Điều này được sử dụng để căn chỉnh văn bản theo chiều dọc.
Step 8 - Working example- Danh sách mã hoàn chỉnh được hiển thị trong khối mã sau. Tạo một trang webbarcharts.html và thêm các thay đổi sau.
barcharts.html
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
svg rect {
fill: gray;
}
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var data = [10, 5, 12, 15];
var width = 300
scaleFactor = 20,
barHeight = 30;
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect").attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>
</body>
</html>
Bây giờ yêu cầu trình duyệt của bạn, bạn sẽ thấy phản hồi sau.
Biểu đồ hình tròn
Biểu đồ hình tròn là một đồ họa thống kê hình tròn, được chia thành các phần để minh họa một tỷ lệ số.
Vẽ biểu đồ hình tròn
Hãy để chúng tôi tạo biểu đồ hình tròn trong SVG bằng cách sử dụng D3. Để làm được điều này, chúng ta phải tuân thủ các bước sau:
Step 1 - Define variables- Hãy để chúng tôi thêm các biến trong script. Nó được hiển thị trong khối mã bên dưới.
<script>
var width = 400;
var height = 400;
var data = [10, 20, 30];
var colors = ['green', 'purple', 'yellow'];
</script>
Đây,
Width - chiều rộng của SVG.
Height - chiều cao của SVG.
Data - mảng các phần tử dữ liệu.
Colors - áp dụng màu sắc cho các yếu tố hình tròn.
Step 2 - Append SVG elements - Hãy để chúng tôi nối các phần tử SVG trong D3 bằng đoạn mã sau.
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
Step 3 - Apply transformation - Hãy để chúng tôi áp dụng chuyển đổi trong SVG bằng cách sử dụng mã sau.
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
Đây,
var g = svg.selectAll(“g”) - Tạo phần tử nhóm để giữ các vòng kết nối.
.data(data) - Liên kết mảng dữ liệu của chúng tôi với các phần tử nhóm.
.enter() - Tạo trình giữ chỗ cho các phần tử nhóm của chúng tôi.
.append(“g”) - Thêm các phần tử nhóm vào trang của chúng tôi.
.attr("transform", function(d, i) {
return "translate(0,0)";
})
Ở đây, dịch được sử dụng để định vị các phần tử của bạn so với nguồn gốc.
Step 4 - Append circle elements - Bây giờ, nối các phần tử vòng tròn vào nhóm bằng đoạn mã sau.
g.append("circle")
Bây giờ, hãy thêm các thuộc tính vào nhóm bằng đoạn mã sau.
.attr("cx", function(d, i) {
return i*75 + 50;
})
Ở đây, chúng tôi sử dụng tọa độ x của tâm của mỗi vòng tròn. Chúng tôi đang nhân chỉ số của vòng tròn với 75 và thêm khoảng đệm là 50 giữa các vòng tròn.
Tiếp theo, chúng tôi thiết lập tọa độ y của tâm của mỗi vòng tròn. Điều này được sử dụng để đồng nhất tất cả các vòng tròn và nó được định nghĩa bên dưới.
.attr("cy", function(d, i) {
return 75;
})
Tiếp theo, thiết lập bán kính của mỗi hình tròn. Nó được định nghĩa dưới đây,
.attr("r", function(d) {
return d*1.5;
})
Ở đây, bán kính được nhân với giá trị dữ liệu cùng với hằng số “1,5” để tăng kích thước của vòng tròn. Cuối cùng, tô màu cho từng vòng tròn bằng đoạn mã sau.
.attr("fill", function(d, i){
return colors[i];
})
Step 5 - Display data- Đây là bước cuối cùng. Hãy để chúng tôi hiển thị dữ liệu trên mỗi vòng kết nối bằng cách sử dụng mã sau.
g.append("text")
.attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif")
.text(function(d) {
return d;
});
Step 6 - Working Example- Danh sách mã hoàn chỉnh được hiển thị trong khối mã sau. Tạo một trang webcirclecharts.html và thêm các thay đổi sau vào đó.
circlecharts.html
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 400;
var height = 400;
var data = [10, 20, 30];
var colors = ['green', 'purple', 'yellow'];
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
g.append("circle").attr("cx", function(d, i) {
return i*75 + 50;
})
.attr("cy", function(d, i) {
return 75;
})
.attr("r", function(d) {
return d*1.5;
})
.attr("fill", function(d, i){
return colors[i];
})
g.append("text").attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif").text(function(d) {
return d;
});
</script>
</body>
</html>
Bây giờ, hãy yêu cầu trình duyệt của bạn và sau đây sẽ là phản hồi.
Biểu đồ tròn
Biểu đồ hình tròn là một biểu đồ thống kê hình tròn. Nó được chia thành các lát để hiển thị tỷ lệ số. Hãy để chúng tôi hiểu cách tạo biểu đồ hình tròn trong D3.
Vẽ biểu đồ hình tròn
Trước khi bắt đầu vẽ biểu đồ tròn, chúng ta cần hiểu hai phương pháp sau:
- Phương thức d3.arc () và
- Phương thức d3.pie ().
Hãy để chúng tôi hiểu chi tiết cả hai phương pháp này.
The d3.arc() Method- Phương thức d3.arc () tạo ra một cung. Bạn cần thiết lập bán kính trong và bán kính ngoài cho cung tròn. Nếu bán kính bên trong bằng 0, kết quả sẽ là biểu đồ hình tròn, nếu không kết quả sẽ là biểu đồ bánh rán, sẽ được thảo luận trong phần tiếp theo.
The d3.pie()Method- Phương thức d3.pie () được sử dụng để tạo biểu đồ hình tròn. Nó lấy dữ liệu từ tập dữ liệu và tính toán góc bắt đầu và góc kết thúc cho mỗi nêm của biểu đồ hình tròn.
Hãy để chúng tôi vẽ biểu đồ hình tròn bằng các bước sau.
Step 1 - Applying styles - Hãy để chúng tôi áp dụng kiểu sau cho một phần tử cung.
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
Ở đây, tô màu được sử dụng để áp dụng màu sắc. Một neo văn bản được sử dụng để định vị văn bản về phía trung tâm của một vòng cung.
Step 2 - Define variables - Xác định các biến trong script như hình dưới đây.
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2;
</script>
Đây,
Width - Chiều rộng của SVG.
Height - Chiều cao của SVG.
Radius - Nó có thể được tính toán bằng cách sử dụng hàm Math.min (width, height) / 2;
Step 3 - Apply Transformation - Áp dụng phép biến đổi sau trong SVG bằng đoạn mã sau.
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
Bây giờ thêm màu sắc bằng cách sử dụng d3.scaleOrdinal chức năng như dưới đây.
var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);
Step 4 - Generate a pie chart - Bây giờ, tạo một biểu đồ hình tròn bằng cách sử dụng chức năng cho bên dưới.
var pie = d3.pie()
.value(function(d) { return d.percent; });
Tại đây, bạn có thể vẽ các giá trị phần trăm. Một hàm ẩn danh được yêu cầu để trả vềd.percent và đặt nó làm giá trị bánh.
Step 5 - Define arcs for pie wedges - Sau khi tạo biểu đồ hình tròn, bây giờ hãy xác định cung tròn cho mỗi nêm hình tròn bằng cách sử dụng chức năng cho dưới đây.
var arc = d3.arc()
.outerRadius(radius)
.innerRadius(0);
Ở đây, cung này sẽ được đặt thành các phần tử đường dẫn. Bán kính được tính toán được đặt thành bên ngoài, trong khi bên trong được đặt thành 0.
Step 6 - Add labels in wedges- Thêm các nhãn trong hình nêm bằng cách cung cấp bán kính. Nó được định nghĩa như sau.
var label = d3
.arc()
.outerRadius(radius)
.innerRadius(radius - 80);
Step 7 - Read data- Đây là một bước quan trọng. Chúng ta có thể đọc dữ liệu bằng cách sử dụng hàm dưới đây.
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
});
Đây, populations.csvchứa tệp dữ liệu. Cácd3.csvhàm đọc dữ liệu từ tập dữ liệu. Nếu dữ liệu không có, nó sẽ tạo ra một lỗi. Chúng tôi có thể đưa tệp này vào đường dẫn D3 của bạn.
Step 8 - Load data - Bước tiếp theo là nạp dữ liệu bằng đoạn mã sau.
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
Ở đây, chúng ta có thể gán dữ liệu cho các phần tử nhóm cho từng giá trị dữ liệu từ tập dữ liệu.
Step 9 - Append path - Bây giờ, nối đường dẫn và gán một 'vòng cung' lớp cho các nhóm như hình dưới đây.
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d) { return color(d.data.states); });
Ở đây, tô màu được sử dụng để áp dụng màu dữ liệu. Nó được lấy từd3.scaleOrdinal chức năng.
Step 10 - Append text - Để hiển thị văn bản trong nhãn bằng cách sử dụng mã sau.
arc.append("text")
.attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
Ở đây, phần tử văn bản SVG được sử dụng để hiển thị văn bản trong nhãn. Các vòng cung nhãn mà chúng tôi đã tạo trước đó bằng cách sử dụngd3.arc()trả về một điểm tâm, là một vị trí cho các nhãn. Cuối cùng, chúng tôi cung cấp dữ liệu bằng cách sử dụngd.data.browser.
Step 11 - Append group elements - Nối các thuộc tính phần tử nhóm và thêm tiêu đề lớp để tô màu văn bản và làm cho nó nghiêng, được chỉ định trong Bước 1 và được định nghĩa bên dưới.
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text")
.text("Top population states in india")
.attr("class", "title")
Step 12 - Working Example- Để vẽ biểu đồ tròn, chúng ta có thể lấy tập số liệu về dân số Ấn Độ. Tập dữ liệu này hiển thị dân số trong một trang web giả, được định nghĩa như sau.
population.csv
states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0
Hãy để chúng tôi tạo trực quan biểu đồ hình tròn cho tập dữ liệu trên. Tạo một trang web “piechart.html” và thêm mã sau vào đó.
<!DOCTYPE html>
<html>
<head>
<style>
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
</style>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "400" height = "400"></svg>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2;
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal([
'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
]);
var pie = d3.pie().value(function(d) {
return d.percent;
});
var path = d3.arc()
.outerRadius(radius - 10).innerRadius(0);
var label = d3.arc()
.outerRadius(radius).innerRadius(radius - 80);
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) { return color(d.data.states); });
console.log(arc)
arc.append("text").attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
});
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text").text("Top population states in india")
.attr("class", "title")
</script>
</body>
</html>