在x轴上跳过重叠标签以获取dc.js中的条形图

Question

如何动态跳过dc.js图表​​中x轴上的标签，以便它们不会与大型数据集重叠。

这是我的剧本的一部分

 requestDateBarChart
            .width(725)
            .height(300)
            .margins({top: 10, right: 10, bottom: 60, left: 30})
            .dimension(requestDateDimension)
            .group(requestDateGroup)
            .x(d3.scale.ordinal().domain(coh.map(function (d) {return d.customerRequestDate; })))
            .xUnits(dc.units.ordinal)
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .on('renderlet',function(chart){
                  chart.selectAll("g.x text")
                    .attr('dx', '-15')
                    .attr('transform', "rotate(-55)");
                })
            .controlsUseVisibility(true);

Answer 1

dc.js中的轴由d3.js生成，因此有一个庞大的社区来帮助这个。要访问x轴，您可以使用v.post(new Runnable() { @Override public void run() { setContentView(winView); } }); - 请注意，因为这会返回一个轴对象，因此I don't recommend chaining it with your other chart initialization code。

在这种情况下，我搜索了＆＃34; d3轴序数滴答＆＃34;和this example popped up。相关功能是axis.tickValues()。

由于您使用chart.xAxis()生成x缩放域，因此您可以使用每个第4个刻度：

coh.map(function (d) {return d.customerRequestDate; })

如果您计算出适合空间的最大滴答数var domain = coh.map(function (d) {return d.customerRequestDate; }); requestDateBarChart.x(d3.scale.ordinal().domain(domain)) var ticks = domain.filter(function(v, i) { return i % 4 === 0; }); requestDateBarChart.xAxis().tickValues(ticks); ，您可以这样做：

MAXTICKS