使用Crossfilter增加旋转轴标签的边距 [英] Increase margins for rotated axis labels with Crossfilter

问题描述

我需要增加已旋转的轴刻度标签的空间。下面的代码说明了，这里是一个

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'：' ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 
 
 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; 
} 
  

解决方案

底部边距与dc.js：

  pets_chart 
 .margins（{top：10，left：30，right： 10，bottom：100}）
  

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

I need to increase the space for axis tick labels that have been rotated. The code below illustrates, and here's a working jsfiddle. Is this possible with crossfilter or do we have to get into the 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;
}

解决方案

It's also possible to set bigger bottom margin with dc.js:

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

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

这篇关于使用Crossfilter增加旋转轴标签的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！