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 范围，然后过滤我所有的其他图表。现在，我可以选择某些条形图并以这种方式对其进行过滤，但我无法选择像本例中这样的范围：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)

图表现在看起来像：

这些条的间距很奇怪，我不知道为什么。 我现在可以在图表上选择一个范围，但它实际上并没有对图表或页面上的任何其他图表进行任何类型的过滤。

Answer 1

目前过滤行为是通过 x 刻度的类型来选择的，因此要获得连续刷牙，您可以使用定量刻度，例如 d3.time.scale()，将日期转换为日期对象，然后使用 xAxis().tickFormat() 显示它们你想要的方式。

Here is the feature request 允许在序数图上刷范围。主要是一个通用的特征如何设计的问题。

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