dc.js: Композитный Диаграмма фильтрации/маркировки

Question

Я следующий композитный график выполнен в dc.js:

barChart 
    .dimension(savingsDimension) 
    .colors('#009900') 
    .centerBar(true) 
    .elasticY(true) 
    .title(function(d) { return d.key + ": " + d.value; }); 

    barChart2 
    .dimension(savingsDimension) 
    .colors('#000099') 
    .centerBar(true) 
    .elasticY(true) 
    .title(function(d) { return d.key + ": " + d.value; }); 

    var lineChart = dc.lineChart(compositeChart) 
    .dimension(savingsDimension) 
    .colors('red') 
    .useRightYAxis(true) 
    .renderDataPoints({ 
     radius: 3, 
     fillOpacity: 0.5, 
     strokeOpacity: 0.8 
    }); 

    var xUnits = data.map(function (d) {return d.short_date; }).sort(); 

    compositeChart 
    .width(1300) 
    .height(350) 
    .x(d3.scale.ordinal().domain(xUnits)) 
    .xUnits(dc.units.ordinal) 
    .xAxisLabel('Month') 
    .brushOn(false) 
    .elasticY(true) 
    .margins({left: 80, top: 10, right: 190, bottom: 80}) 
    .legend(dc.legend().x(1160).y(220).itemHeight(13).gap(5)) 
    .compose([barChart, barChart2, 
     lineChart 
    ]).renderlet(function(chart){ 
     chart.selectAll("g.x text") 
     .attr('transform', "rotate(-65)") 
     .attr('x', -20); 
    }); 

    barChart.group(fSavingsDimensionGroup, ' First Savings'); 
    barChart2.group(sSavingsDimensionGroup, 'Second Savings'); 

Первое, что у меня возникли проблемы с делает это так, что я могу выбрать x-range на этой составной диаграмме, которая затем будет фильтровать все мои другие диаграммы. Прямо сейчас, я могу выбрать определенные полосы и фильтровать их таким образом, но я не могу выбрать диапазон, как в этом примере: http://dc-js.github.io/dc.js/examples/filtering.html

Я пробовал использовать .controlsUseVisibility(true), но это просто ошибки.

Кроме того, несмотря на то, что у меня на моей гистограмме есть .centerBar(true), эти метки по-прежнему не центрированы. Не уверен, что я делаю не так.

Edit # 1:

Изменен код:

compositeChart 
    .width(1300) 
    .height(350) 
    .x(d3.time.scale().domain([savingsDimension.bottom(1) 
    [0].billing_period_start, savingsDimension.top(1) 
    [0].billing_period_start])) 
    [0].billing_period_start, savingsDimension.top(1) 
    [0].billing_period_start)) 
    .xAxisLabel('Month') 
    .elasticY(true) 
    .margins({left: 80, top: 10, right: 190, bottom: 80}) 
    .legend(dc.legend().x(1160).y(220).itemHeight(13).gap(5)) 
    .renderlet(function(chart){ 
     chart.selectAll("g.x text") 
     .attr('transform', "rotate(-65)") 
     .attr('x', -36) 
     .attr('y', -20); 
    }); 

compositeChart.xAxis().tickFormat(d3.time.format('%m-%Y')).ticks(24); 
compositeChart.xUnits(d3.time.months) 

И диаграмма теперь выглядит следующим образом:

Бруски причудливо разнесены, и я понятия не имею, Зачем. Теперь я могу выбрать диапазон на диаграмме, но на самом деле он не делает никакой фильтрации для диаграммы или любого другого графика на странице.

Answer 1

В настоящее время поведение фильтрации выбирается по типу шкалы x, поэтому для непрерывной чистки вы можете использовать количественную шкалу, такую ​​как d3.time.scale(), конвертировать свои даты на даты, а затем использовать xAxis().tickFormat(), чтобы отобразить их так, как вы хотите ,

Here is the feature request, чтобы позволить щетке диапазона по порядковым диаграммам. Речь идет главным образом о том, как создать функцию в общем виде.

Вы перемещаете метки метки с помощью своей рендеринговой панели, поэтому вы должны отрегулировать смещение там, чтобы центрировать ваши метки.