如何使用dc.js调整x轴位置 使x轴沿y=0轴线显示

我当前实现的图表效果如下：

但我希望x轴能够沿y=0位置排布，参考效果如下：

理想状态下，我希望刻度标签要么显示在图表上方的蓝色区域内，要么保留在图表底部的原有位置。

补充说明：图表创建方式 #

我的实现代码如下：

var                                                                                     
  ndx = crossfilter(data),                                                              
  dataDimension = ndx.dimension(d => d.period),                                         
  ordinals = data.map(d => d.period),                                                   
  lossGroup = dataDimension.group().reduceSum(d => d.loss),                             
  offsets = lossGroup.all().map(d => -d.value),                                         
  chart;                                                                                
                                                                                        
// 数据结构如下 {                                                                   
//   period: Date (周期起始时间，例如月初),                                        
//   start: Integer (周期初始/上一周期结束的留存值)                      
//   loss: Integer (周期内流失数值)                                          
//   gain: Integer (周期内增长数值)                                        
// }                                                                                    
                                                                                        
chart = dc.barChart(chartElement)                                                       
  .dimension(dataDimension)                                                             
  // 第一个分组为流失值                                                        
  .group(lossGroup)                                                                     
  .stack(dataDimension.group().reduceSum(d => d.start), 'carryforward')                 
  .stack(dataDimension.group().reduceSum(d => d.gain), 'gain')                          
  .stackLayout(d3.layout.stack().offset(layers => offsets))                             
  .x(d3.scale.ordinal(ordinals).domain(ordinals))                                       
  .xUnits(dc.units.ordinal)                                                             
  .elasticY(true)                                                                       
  .renderLabel(false)                                                                   
  // 各分组悬浮提示                                                        
  .title(item => 'Loss: ' + item.value)                                                 
  .title('carryforward', item => 'Sustained: ' + item.value)                            
  .title('gain', item => 'Gain: ' + item.value)                                         
  .renderTitle(true);                                                                   
  dc.renderAll();                     

dc.js 没有提供直接将x轴锚定到y=0基线的内置配置，通过renderlet钩子在每次图表渲染、重绘完成后动态调整x轴位置即可，完全适配当前堆叠柱状图+弹性Y轴的场景。

实现代码 #

在现有chart的链式调用中追加如下事件监听：

chart.on('renderlet', function(c) {
  // 计算当前Y轴范围下，y=0对应的垂直像素坐标
  const zeroYPosition = c.y()(0);
  // 移动整个x轴（含轴线、刻度、标签）到y=0位置
  c.g().select('.x.axis')
    .attr('transform', `translate(0, ${zeroYPosition})`);

  // 刻度标签位置二选一即可
  // 选项1：标签保留在轴线下方（和原底部展示逻辑一致）
  c.g().selectAll('.x.axis .tick text')
    .attr('dy', '1em')
    .style('text-anchor', 'middle');

  // 选项2：标签放到轴线上方（蓝色图表区域内），注释掉选项1后打开下面代码即可
  // c.g().selectAll('.x.axis .tick text')
  //   .attr('dy', '-0.3em')
  //   .style('text-anchor', 'middle');
})

适配优化 #

1. 边距调整：如果选择把标签放到图表区域内，可以缩小底部留白，在chart初始化时追加边距配置：

   chart.margins({top: 20, right: 10, bottom: 20, left: 50})
   

   把默认的50px左右底部边距改小即可，不会出现内容裁切。
2. 样式调整：如果需要自定义零基线样式，可以通过CSS配置：

   /* 调整零基线颜色、粗细 */
   .dc-chart .x.axis path {
     stroke: #666;
     stroke-width: 1px;
   }
   /* 不需要刻度短线可以直接隐藏 */
   .dc-chart .x.axis .tick line {
     display: none;
   }
   

该方案会自动适配elasticY的动态范围，过滤数据、窗口resize触发重绘时，x轴都会自动对齐到y=0位置，不会出现错位。

内容的提问来源于stack exchange，提问作者artfulrobot