d3.js 및 교차 필터 데이터를 사용하여 막대 그래프를 만드는 방법은 무엇입니까?

Question

내 demo (영구 링크,로드하는 데 시간이 좀 걸릴 수 있음)입니다.

나는 그것으로 몇 가지 문제가 있습니다 :

1. crossfilter 키는 상위 경계를 반영하지 않습니다. 따라서 x 축은 한 단계 빠져 있습니다.

   

   은 내가 d3.extent(group.all())[1]에 추가 한 후 한 그룹 단계 크기 (group.all()[1] - group.all()[0])을 받고으로 문제를 해결할 수 있었다. 더티 픽스이기 때문에 데모에 포함시키지 않았습니다 (데이터 갭이있을 수 있습니다). 그룹 단계 크기를 얻거나 x 축을 수정하는 덜 부정적인 방법은 무엇입니까?

2. 막대 사이에 간격이 불균일합니다. x.scale 불일치를 다른 데이터 세트로 수정하는 방법을 이해할 수 없습니다.

   

   나는 바 폭이 가능한 그래프의 폭에 자동으로 적응합니다. 따라서, I 최적 바의 폭을 계산하고 (필요한 경우)을 그래프 자체 조정 :이 조건 하에서

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

   을 그곳에 키 값 요철 데이터를 반환 할 수있는 방법 x.scale없고, 아직은한다. 마법은 없습니다. 나는 단순히 뭔가를 간과하고있다. 그러나 그것은 무엇입니까?

   x.scale는는 다음 x.scale 범위를 설정하기 전에 graph_width에서 bar_width 공제 엉망 문제를 해결. 하지만, x.scale이 예상대로 작동하지 않을 때를 감지하는 조건을 파악할 수는 없습니다.

Answer 1

나는 이것을 수행하는 데 올바른 방법을 찾아내는 데 많은 시간을 투자했습니다. 그러나 간단한 수학을 사용하여 상위 데이터 경계를 추측했습니다. 시각적으로 극단을 다루는 방법과 같이 여전히 해결해야 할 문제가 많이 있습니다. 재사용 가능한 히스토그램 라이브러리를 개발

내 시도는 on github 액세스 할 수 있습니다.