Làm cách nào để tạo trình định dạng trục tùy chỉnh cho giờ và phút trong d3.js?

Question

Tôi đã có tập dữ liệu Tôi đang vẽ đồ thị với d3.js. Trục x biểu thị thời gian (tính bằng phút). Tôi muốn hiển thị trục này ở định dạng hh:mm và tôi không thể tìm cách làm việc này trong d3.

đang trục của tôi trông như:

svg.append('g') 
    .attr('class', 'x axis') 
    .attr('transform', 'translate(0,' + height + ')') 
    .call(d3.svg.axis() 
    .scale(x) 
    .orient('bottom')); 

nào tạo nhãn trong vài phút mà trông giống như [100, 115, 130, 140] vv

giải pháp hiện tại của tôi là chọn text yếu tố sau khi họ đã được tạo và ghi đè chúng bằng hàm:

svg.selectAll('.x.axis text') 
    .text(function(d) { 
     d = d.toFixed(); 
     var hours = Math.floor(d/60); 
     var minutes = pad((d % 60), 2); 
     return hours + ":" + minutes; 
    }); 

Trục đầu ra này ticks như [1:40, 1:55, 2:10], v.v.

Nhưng điều này cảm thấy khó chịu và tránh sử dụng d3.format. Có cách nào tốt hơn để tạo các nhãn này không?

Answer 1

Nếu bạn có thời gian tuyệt đối, có lẽ bạn muốn chuyển đổi x dữ liệu của bạn để Javascript Date objects chứ không phải là con số đơn giản, và sau đó bạn muốn sử dụng d3.time.scale và d3.time.format. Ví dụ về định dạng "hh: mm" cho trục sẽ là:

d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(d3.time.format("%H:%M")); 

Và thực tế, bạn có thể không cần chỉ định định dạng đánh dấu; tùy thuộc vào lĩnh vực quy mô của bạn và số lượng ve, các default time scale format có thể là đủ cho nhu cầu của bạn. Ngoài ra, nếu bạn muốn kiểm soát hoàn toàn, bạn cũng có thể chỉ định khoảng thời gian đánh dấu vào thang đo. Ví dụ, đối với bọ ve mỗi mười lăm phút, bạn có thể nói:

d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(d3.time.minutes, 15) 
    .tickFormat(d3.time.format("%H:%M")); 

Nếu bạn có thời gian tương đối, tức khoảng thời gian, (và do đó có số đại diện phút thay vì ngày tuyệt đối), bạn có thể định dạng các là ngày bằng cách chọn một kỷ nguyên tùy ý và chuyển đổi khi đang di chuyển. Bằng cách đó bạn có thể để chính dữ liệu dưới dạng số. Ví dụ:

var formatTime = d3.time.format("%H:%M"), 
    formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); }; 

Vì chỉ có phút và giờ sẽ được hiển thị, không quan trọng bạn chọn thời điểm nào. Dưới đây là một ví dụ sử dụng kỹ thuật này để định dạng một phân phối thời gian:

• http://bl.ocks.org/3048166