mouseZoomable 不适用于折线图上的 elasticX

Question

我有折线图的代码

如下，

var ndx = crossfilter(data),
    dim = ndx.dimension(function(d) {return d.index;}),
    profitGrp = dim.group().reduceSum(function(d) { return d.profit});

var profitChart = dc.lineChart("#profit-chart")
    .width($("#profit-chart").parent().width())
    .height(400)
    .dimension(dim)
    .mouseZoomable(true)
    .x(d3.scale.linear()).xAxisPadding(0.25).elasticX(true)
    .group(profitGrp, "Profit")
    .renderHorizontalGridLines(true)
    .elasticY(true)
    .legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
    .margins({left: 100, right: 40, top: 40, bottom: 40})
    .brushOn(false);

但是我不能鼠标缩放in/out。

我该怎么办？我想是因为 elasticX(true)

Answer 1

对，缩放与elasticX(true)相矛盾

如果你想要 "elastic once" 行为，一个技巧是：

chart.on('postRender', function(chart) {
    chart.elasticX(false);
});

http://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#on

Answer 2

就我而言，戈登的回答无效。所以还有另一种方法，尝试使用"preRedraw"事件：

chart.on('preRedraw', function(chart) {
    chart.elasticX(false);
});

mouseZoomable 不适用于折线图上的 elasticX

mouseZoomable does not work with elasticX on line chart

dc.js