Cách tạo biểu đồ bằng cách sử dụng d3.js và dữ liệu crossfilter?

Question

Đây là số demo của tôi (liên kết cố định; có thể mất một giây để tải).

Tôi đang gặp một vài vấn đề với nó:

1. trọng điểm crossfilter không phản ánh ranh giới trên. Do đó, trục x thiếu một bước.

   

   Tôi cố gắng sửa chữa nó bằng cách nhận một kích thước nhóm bước (group.all()[1] - group.all()[0]) và sau đó thêm nó vào d3.extent(group.all())[1]. Bởi vì nó là một sửa chữa bẩn, tôi đã không bao gồm điều này để demo (có thể bởi một khoảng cách dữ liệu). Một cách ít bẩn để có được kích thước nhóm bước/sửa chữa trục x là gì?

2. Có khoảng cách không đồng đều giữa các thanh. Tôi không thể tìm ra cách khắc phục sự không thống nhất x.scale với các tập dữ liệu khác nhau.

   

   Tôi muốn thanh-chiều rộng để thích ứng tự động để chiều rộng đồ thị có sẵn. Vì vậy, tôi tính toán độ rộng thanh tối ưu và sau đó (nếu cần) thay đổi kích thước đồ thị chính nó:

   bar_width = math.round(graph_width/data_length); 
   graph_width = bar_width*data_length; 
   

   Trong điều kiện này, không có cách nào x.scale có thể trả lại dữ liệu không đồng đều đối với bất kỳ giá trị quan trọng, tuy nhiên nó. Không có phép thuật; Tôi đơn giản nhìn cái gì đó. Nhưng nó là gì?

   Khi x.scalelà sai lầm sau đó trừ đi bar_width từ graph_width trước khi thiết lập phạm vi x.scale sửa chữa vấn đề. Mặc dù, tôi không thể tìm ra điều kiện để phát hiện khi x.scale không hoạt động như mong đợi.

Answer 1

Tôi đã dành rất nhiều thời gian để cố gắng tìm ra cách phù hợp để thực hiện việc này. Tuy nhiên, tôi đã sử dụng toán học đơn giản để đoán ranh giới dữ liệu phía trên. Có nhiều vấn đề vẫn chưa được giải quyết, chẳng hạn như cách xử lý trực quan thái cực.

nỗ lực của tôi để phát triển một thư viện biểu đồ tái sử dụng có thể truy cập on github.