如何使用 dc.js 移动 x 轴位置？

Question

I have this:

But I want the x axis to run along y=0 , eg

And ideally I'd either have the tick labels on top ie in the blue bit, or where they were at the bottom of the chart.

EDIT: how the chart is created.

I'm using something like:

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;                                                                                
                                                                                        
// The data is like {                                                                   
//   period: Date (start of period, e.g. month),                                        
//   start: Integer (number at start of period/end of last period)                      
//   loss: Integer (number lost during period)                                          
//   gain: Integer (number gained during period)                                        
// }                                                                                    
                                                                                        
chart = dc.barChart(chartElement)                                                       
  .dimension(dataDimension)                                                             
  // The first group is the loss                                                        
  .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)                                                                   
  // The first group is the loss                                                        
  .title(item => 'Loss: ' + item.value)                                                 
  .title('carryforward', item => 'Sustained: ' + item.value)                            
  .title('gain', item => 'Gain: ' + item.value)                                         
  .renderTitle(true);                                                                   
  dc.renderAll();                     

Answer 1

Hmm, I guess you are using .stackLayout() to get the negative stacking. Since dc.js doesn't “look inside” this setting, I don't think there is anything built-in to offset the axis. You would probably need to use a pretransition handler to move it.

As for moving the tick labels, you could use .title() instead, like in this example . And then set the tick label to empty.

Best I can think of, not really an answer but more than a comment. :-)