使用 Crossfilter 增加旋转轴标签的边距

Question

我需要为已旋转的轴刻度标签增加 space。下面的代码说明了，这里有一个working jsfiddle。这可以通过 crossfilter 实现还是我们必须进入 d3？

HTML

<script src="https://rawgit.com/square/crossfilter/master/crossfilter.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://rawgit.com/dc-js/dc.js/develop/dc.js"></script>

<span>
  <div id="petchart"></div>
</span>

JS

j = [{'pet': 'Felis catus'}, {'pet': 'Canis lupus familiaris'}, {'pet': 'none'}, 
        {'pet': 'Felis catus'}, {'pet': 'Melopsittacus undulatus'}, 
    {'pet': 'Canis lupus familiaris'}, {'pet': 'Canis lupus familiaris'}];

cf = crossfilter(j);
pets_chart = dc.barChart("#petchart");
petDimension = cf.dimension(function(d) {return d.pet;});
petCountGroup = petDimension.group();

pets_chart
  .dimension(petDimension)
  .group(petCountGroup)
  .x(d3.scale.ordinal().domain(["Felis catus","Canis lupus familiaris","Melopsittacus undulatus","none"])) 
  .xUnits(dc.units.ordinal)
    .width(300).height(250)
  .colors(['#1f77b4']).colorAccessor(function(d, i){ return i; })
  .xAxis().ticks(2);

dc.renderAll();

CSS

g .x.axis text {
    text-anchor: end !important;
    transform: rotate(-45deg);
    font-size: 0.7em;
}

Answer 1

有可能 CSS:

.dc-chart svg {
  overflow: visible
}

https://jsfiddle.net/LukaszWiktor/70jx74c5/

Answer 2

也可以通过 dc.js 设置更大的底部边距:

pets_chart
   .margins({ top: 10, left: 30, right: 10, bottom: 100 })

https://jsfiddle.net/LukaszWiktor/fts3tevj/

使用 Crossfilter 增加旋转轴标签的边距

Increase margins for rotated axis labels with Crossfilter

d3.js

crossfilter

dc.js