Tôi đang cố gắng học d3 với cuốn sách Hình ảnh hóa web tương tác, nhưng nhiều thứ đã thay đổi với phiên bản 4.0. Một điều tôi thực sự không thể tìm ra là nếu có một tương đương cho d3.scale.category10 () để có được một ánh xạ dễ dàng với màu sắc. Có điều gì đó tương tự trong phiên bản mới hay chúng ta cần sử dụng math.random và tự viết mã thứ gì đó?
Câu trả lời:
Thay vì
d3.scale.category10()
sử dụng
d3.scaleOrdinal(d3.schemeCategory10);
Tạo thang màu như sau:
var color = d3.scaleOrdinal(d3.schemeCategory10);
sử dụng màu như thế này trong mã giống như trong V3:
svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", color(3))
đọc ở đây
Tham khảo tại đây
mã làm việc ở đây
color(), trong mã làm việc của bạn, đầu ra luôn có màu xanh lam và màu cam - đó có phải là hành vi được mong đợi không? Nếu tôi muốn màu tím thì sao?
color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));
Một giải pháp đơn giản là sử dụng các thang màu sau trong phiên bản 4 của d3.js:
var colorScale_1 = d3.schemeCategory10;
var colorScale_2 = schemeCategory20;
var colorScale_3 = d3.schemeCategory20b;
var colorScale_4 = d3.schemeCategory20c;
colorScale_1, colorScale_2, colorScale_3, colorScale_4 là các mảng có các màu khác nhau. Vì vậy, bạn có thể sử dụng các chỉ số khác nhau của chúng để tô hình dạng. Ví dụ
svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", colorScale_1[2])
Để tham khảo, hãy xem tại đây: http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4
Hy vọng rằng sẽ giúp.