D3.js thay đổi kiểu đường trục trục x

Question

Trong biểu đồ d3.js, đường trục x (đường màu đen giữa các thanh và nhãn thanh) loại trông giống như thế này theo mặc định: | ------- --------- |, xem hình dưới đây:

Làm thế nào tôi có thể thay đổi điều này để chỉ một đường thẳng (không đường dọc trên hai đầu)?

Nhìn vào SVG được tạo, mã này dường như đang xác định kiểu đó: <path class="domain" d="M0,6V0H824V6"></path>, được tạo tự động bởi D3.

Cảm ơn!

Answer 1

này được điều khiển bởi axis.outerTickSize():

Một kích thước đánh dấu bên ngoài từ 0 ngăn chặn hai đầu vuông của con đường miền, thay vì tạo ra một đường thẳng.

Tất cả những gì bạn cần làm là đặt axis.outerTickSize(0).

Answer 2

Câu trả lời của Lars Kotthoff vẫn hợp lệ đối với các phiên bản d3 trước 4.x, với phiên bản 4 đã thay đổi thành axis.tickSizeOuter(). Lưu ý rằng tickSize() cũng sửa đổi các dấu tick bên ngoài, có nghĩa là thứ tự gọi tickSize() và tickSizeOuter() là quan trọng.

d3.axisBottom(xScale) 
    .tickValues(series) 
    .tickSize(5) 
    .tickSizeOuter(0) 
);