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允许范围刷在序数图表上。主要是如何以一般方式设计特征的问题。

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

dc.js：复合图表过滤/标签

1 个答案: