DC.js xAxis 범위, 하위 집합 만 표시

Question

다음 예에서는 xAxis가 "Magnitude by Events"에 대해 2 - max로만 표시되도록 조정하는 가장 좋은 방법은 무엇입니까?

dc.js chart example, New Zealand Earthquakes

Answer 1

이 답변이 차트를 만들고, 제라르의 솔루션 @에 확장 동적으로 조정하고, 몇 직류 처리. js 단점.

첫 번째로,이 예제의 원저자는 물건을 작동시키기 위해 몇 가지 것을 퍼지했습니다. 당신이 진정으로 동적 축을 원하는 경우에, 당신은 방법 자체에 대한 막대 폭을 계산하는 방법 dc.js를 표시해야합니다 :

magnitudeChart 
    .xUnits(dc.units.fp.precision(0.1)) 

및 .gap(65) 제거 - 매직 넘버 그런 종류의 기호는 항상 누군가는 할 수 없었다 자동 계산 된 항목을 얻는 방법 알아보기

dc.js가 막 대형 차트를 처리하는 방법에는 몇 가지 단점이 있습니다. 하나는 도메인을 설정할 때 자체 바 너비 또는 센터링을 실제로 설명하지 않으며 사용자가 지정한 바를 정확히 사용합니다. 최대 값을 자동으로 계산할 때 가장 오른쪽에있는 막대가 없음을 알 수 있습니다. (elasticX(true)도 마찬가지입니다.)

막대 중심 설정을 해제하고 계산할 때마다 0.1 막대 너비를 도메인에 추가해 봅시다.

magnitudeChart 
    .centerBar(false) 
    .x(d3.scale.linear().domain([2, d3.max(data, d=>d.mag)+0.1])) 

다음, crossfilter가 자동으로 빈 쓰레기통을 제거하지 않기 때문에 우리가 할 수있는 fake group에서 그룹을 포장 할 수 있습니다

function remove_empty_bins(source_group) { 
    return { 
     all:function() { 
      return source_group.all().filter(function(d) { 
       return d.value != 0; 
      }); 
     } 
    }; 
} 

magnitudeChart 
    .group(remove_empty_bins(magValueGroupCount)) 

을 그리고 우리는 차트가 그 도메인이 다시 그려 것마다 다시 계산 할 수 있습니다 과 같이 : 블록의

.on('preRedraw', function(chart) { 
    chart.x().domain([2, d3.max(chart.group().all(), kv=>kv.key) + 0.1]); 
    chart.rescale(); 
}); 

포크 : http://bl.ocks.org/gordonwoodhull/7675bb4bb67354cfdc7c6841106d7b31

Answer 2

변경이 라인 :

.x(d3.scale.linear().domain([0.5, 7.5])) 

사람 :

.x(d3.scale.linear().domain([2, d3.max(data, d=>d.mag)]))