Thay đổi các dấu trên trục x

Question

Tôi đang cố gắng tìm ra d3.js. Trong khi xác định trục, Làm thế nào tôi có thể nhận được ghi nhãn tùy chỉnh trên trục x. Ví dụ, việc ghi nhãn mặc định tôi nhận được là:

|------|------|------|------|------|------| 
20 30  40  50  60  70  80 

Trong khi đó, tôi muốn một cái gì đó như:

|------|------|------|------|------|------| .... 
20 26  32 38  44  50  56 

Tôi hiện đang học nó và làm việc trên mã (chút thay đổi) từ ví dụ chính thức cung cấp:

var xAxis = d3.svg.axis().scale(x).tickPadding(7).orient("bottom"); 
var yAxis = d3.svg.axis().scale(y).tickPadding(5).orient("left"); 

Answer 1

Các dấu mặc định cho thang đo định lượng là bội số của 2, 5 và 10. Bạn dường như muốn bội số của 6; mặc dù không bình thường, điều này có thể có ý nghĩa tùy thuộc vào bản chất của dữ liệu cơ bản. Vì vậy, trong khi bạn có thể sử dụng axis.ticks để tăng hoặc giảm số lượng đánh dấu, nó sẽ luôn trả về bội số của 2, 5 và 10 - không 6.

Nếu bạn muốn bội số 6, bạn có thể sử dụng axis.tickValues để chỉ định giá trị đánh dấu một cách rõ ràng. Điều này thường được sử dụng kết hợp với d3.range. Ví dụ:

xAxis.tickValues(d3.range(20, 80, 4)); 

Nếu bạn muốn tính toán giá trị động, hãy sử dụng miền của thang đo x để lấy giá trị thấp nhất và cao nhất. Cũng nên nhớ rằng giới hạn trên của phạm vi là độc quyền, vì vậy trong ví dụ trên, giá trị đánh dấu lớn nhất là 76. Bạn có thể làm cho giới hạn trên bao gồm bằng cách làm cho giá trị dừng của phạm vi lớn hơn một chút (ví dụ: 81).