Hide dc.js chart on x axis

Question

As shown below, the x axis is very dirty due to the large data range. I want to remove the x axis, good luck?

my current code is:

toneChart.width(300).height(280) .dimension(tone) .group(toneGroup) .title(function (d) { return ""; }) .ordering(function(d) { return - d.value }) .cap(10) .transitionDuration(750) .renderLabel(true) .colors(d3.scale.category10()) .elasticX(true); 

Thanks!

Answer 1

It's funny I just decided it!

Tips: adjust the margins of the chart. Dirty but works fine for me :-P

 .margins({top: 0, right: 0, bottom: -1, left: 0}) 

Answer 2

CSS can hide axes and text.

Delete row x with chart axis

Add the following to your CSS (replacing #ID with yours):

 #your-row-chart svg g g.axis.x { display: none; } 

Delete y-axis histogram

Add the following to your CSS (replacing #ID with yours):

 #your-bar-chart svg g g.axis.y { display: none; } 

Answer 3

You can control the formatting of values ​​along the X axis using the .xAxis () method. tickFormat (), which comes from D3.

 // To format as a percent chart.xAxis().tickFormat(function(v) { return 100 * v/yourDenominator + "%"; }); // To blank the the values entirely, though not the actual ticks marks themselves chart.xAxis().tickFormat(function(v) { return ""; }); 

Here is a link to the documentation

https://github.com/dc-js/dc.js/blob/master/web/docs/api-1.6.0.md#xaxisxaxis

I found it best to do such things outside of the traditional stack of configuration methods, because if you include xxx (). tickFormat () with everything else, the next method on the stack, of course, will have to be associated with the D3 object emitted by the call to .tickFormat (), which can lead to errors of insanity.

Answer 4

I had the same question for the y axis, and here is one way to do this in the library itself:

• After the line var _yElasticity = false; add:

    var _yVisibility = true; 

• After declaring _chart.elasticY = function (_) { ... } define a new function .showYAxis([boolean]) , adding:

   /** #### .showYAxis([boolean]) Turn on/off y axis. **/ _chart.showYAxis = function (_) { if (!arguments.length) { return _yVisibility; } _yVisibility = _; return _chart; }; 

• Change the condition that determines when the y axis is displayed from

    if (_chart.elasticY() || render) { _chart.renderYAxis(_chart.g()); } 

to

  if ((_chart.elasticY() || render) && (_chart.showYAxis()) ) { _chart.renderYAxis(_chart.g()); } 

4. Now you can remove the y axis in your charts by simply adding .showYAxis(false) .

Answer 5

You can try

 toneChart.xAxis().ticks(0) 

and in your CSS (erase axis)

 .toneChart .axis path, .axis line{ stroke: none; }