d3.js mặc định axis.tickFormat để đồng hồ 24 giờ

Question

Tôi thực sự thích hành vi mặc định của axis.tickFormat khi âm mưu điều theo thời gian, và chỉ tạo ra trục x của tôi như thế này:

var xAxisBottom = d3.svg.axis().scale(xScale); 

Tôi đang sử dụng chức năng bàn chải, để người dùng có thể mở rộng dọc theo trục x và do đó giá trị của nó phải cập nhật tương ứng. Nếu người dùng xem xét dữ liệu trong cả năm, thì số lần truy cập với tháng là tốt. Nếu người dùng xem dữ liệu trong một ngày, thì việc đánh dấu bằng giờ và phút là tốt. Và cứ thế.

Điều tốt là hành vi mặc định của trục là như thế này. Điều xấu là nó cho thấy giờ trong AM/PM, và tôi muốn thay đổi điều đó thành một đồng hồ 24 giờ.

Tôi biết tôi có thể thiết lập tickFormat của riêng mình dựa trên khoảng thời gian hiện tại của cọ vẽ, nhưng trong trường hợp đó tôi không biết làm thế nào để có được một cái gì đó giống như hình dưới đây, nơi các định dạng khác nhau được trộn lẫn.

Vì vậy, có một cách dễ dàng để có được 24 giờ đồng hồ thay vì AM/PM?

Answer 1

Không dễ dàng như trong "gọi một dòng mã", nhưng bạn có thể cuộn định dạng thời gian của riêng mình đủ dễ dàng. Xem here để biết ví dụ. Ý tưởng chính là bạn có một danh sách các định dạng ngày tháng và chức năng lọc, được đưa ra một ngày, trả về true nếu định dạng liên quan được sử dụng. Trong trường hợp của bạn, bạn sẽ chỉ cần hai cấp độ, một để hiển thị ngày (nếu ngày là nửa đêm) hoặc thời gian (nếu ngày là 12 giờ trưa).

Answer 2

Cần lưu ý rằng nếu bạn đang sử dụng thời gian UTC trên trục thay vì giờ địa phương, thì d3 sẽ gọi một bộ định dạng khác trong nội bộ. Bạn cần điều này:

  return (d3.utcSecond(date) < date ? formatMillisecond 
      : d3.utcMinute(date) < date ? formatSecond 
      : d3.utcHour(date) < date ? formatMinute 
      : d3.utcDay(date) < date ? formatHour 
      : d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek) 
      : d3.utcYear(date) < date ? formatMonth 
      : formatYear)(date); 

thay vì các cuộc gọi được tham chiếu trong ví dụ được liên kết ở trên. Thay đổi là thay thế "d3. utc XXX (ngày)" cho "d3. thời gian XXX (ngày)".