在x軸上跳過dc.js中條形圖的標籤

如何動態地跳過dc.js圖表中的x軸上的標籤，以便它們不應與大數據集重疊。在x軸上跳過dc.js中條形圖的標籤

這裏是我的腳本

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

來源

2016-12-02 ashishraaj

沒什麼大不了的，但添加額外的模糊標籤，如「JavaScript」和「圖表」從未與dc.js問題有所幫助，並能有時甚至引起不必要的注意（憎恨）。我已經添加了d3.js標籤，因爲它與軸問題相關 - 請參閱下文。 – Gordon

在dc.js的軸由d3.js生產的一部分，所以有一個龐大的社區在那裏，以幫助這一個。要訪問x軸，您可以使用chart.xAxis() - 只需要小心，因爲這會返回一個軸對象，所以I don't recommend chaining it with your other chart initialization code。

在這種情況下，我搜索了「d3軸序數滴答」和this example popped up。相關功能是axis.tickValues()。

由於您使用coh.map(function (d) {return d.customerRequestDate; })產生的x縮放比例域，你可以使用每4個節拍，像這樣：

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，能適合在空間的一些最大數量，也許你可以這樣做：

var stride = Math.ceil(domain.length/MAXTICKS); 
var ticks = domain.filter(function(v, i) { return i % stride === 0; });

來源

2016-12-02 20:07:08 Gordon

在x軸上跳過dc.js中條形圖的標籤

回答

相關問題