Çaprazfiltre ile döndürülmüş eksen etiketleri için kenar boşluklarını artırın

Question

Döndürülmüş olan eksen işareti etiketleri için alanı büyütmem gerekiyor. Aşağıdaki kod göstermektedir ve işte bir working jsfiddle. Bu, çapraz filtreyle mümkün mü ya da d3'e girmek zorunda mıyız?

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

O dc.js ile daha büyük alt kenar boşluğunu ayarlamak da mümkündür:

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

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

Answer 2

O CSS ile mümkündür:

.dc-chart svg { 
    overflow: visible 
} 

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