dc.js：综合图表filtering/labeling

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');

我遇到的第一件事是制作它，以便我可以 select 在此复合图表上的 x 范围，然后将过滤我所有其他图表。现在，我可以 select 某些柱状图并以这种方式过滤它，但我不能 select 像这个例子中的范围：http://dc-js.github.io/dc.js/examples/filtering.html

我尝试使用 .controlsUseVisibility(true) 但它只是出错了。

此外，即使我的两个条形图上都有 .centerBar(true)，标签仍然没有居中。不确定我在那里做错了什么。

编辑#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)

图表现在看起来像：

条形间隔很奇怪，我不知道为什么。我现在可以 select 图表上的范围，但它实际上不会对图表或页面上的任何其他图表进行任何类型的过滤。

Answer 1

目前过滤行为是由x标度类型来选择的，所以要连续刷可以使用量化标度如d3.time.scale()，将日期转换为日期对象，然后使用xAxis().tickFormat() 以您想要的方式显示它们。

Here is the feature request 允许范围刷在顺序图表上。主要是如何通用的设计feature的问题

您正在使用 renderlet 移动刻度标签，因此您应该调整那里的位移以使标签居中。

dc.js：综合图表filtering/labeling

dc.js: Composite Chart filtering/labeling

crossfilter

dc.js