クロスフィルターで回転軸ラベルのマージンを増やす

Question

回転された軸目盛ラベルのスペースを増やす必要があります。以下のコードは、working jsfiddleです。これはクロスフィルタで可能ですか、または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

それはdc.jsと大きな下マージンを設定することも可能です：

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

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

Answer 2

それはCSSで可能です：

.dc-chart svg { 
    overflow: visible 
} 

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