D3.js alternative to .tickSubdivide axis?

Question

I want to draw subtitles on the axis in D3. But this is not possible in the last D3.

There was an axis.tickSubdivide () function for drawing subtitles, but I think this is deprecated. ( https://github.com/mbostock/d3/commit/bd0ce6cab8a2b0d2aaffc7ce21a873fc514eb8ed )

And axis.tickSubdivide () is no longer in the API ( https://github.com/mbostock/d3/wiki/API-Reference ).

I tried using axis.innerTickSize, but that didn't work.

Is there any way to draw subtitles on the axis at my disposal?

I found an example ( http://bl.ocks.org/GerHobbelt/3605124 ) that used axis.tickSubdivide (), but I can't figure out how it can work even when the built-in d3.v3.min.js says: " n.tickSubdivide = function () {return arguments.length && n} ", which does nothing and simply returns the axis.

Answer 1

An alternative to drawing two axes is to first draw all the ticks, then reselect them and adjust their styles according to their data or index values.

An example and explanation is here:
fooobar.com/questions/611282 / ...

There are several advantages to this approach:

• , /,
• DOM , .

, , - ​​ , Lars.

Answer 2

, , , . , , :

svg.append("g")
  .attr("class", "grid")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.svg.axis().scale(x).ticks(20).tickSize(-height))
  .selectAll(".tick")
  .data(x.ticks(10), function(d) { return d; })
  .exit()
  .classed("minor", true);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.svg.axis().scale(x).ticks(10));

.

Answer 3

, :

d3.selectAll('g.x.axis .tick text').each(function(d,i){
    if(i%2==1){
      d3.select(this).remove()
    }
  })

Answer 4

AmeliaBR detailed answer according to my requirements. We selected the values ​​that I need only labels, instead of ticks and values, added the "hide" class. But it can be used for any theme options.

            var gy = humiditySVG.append( "g" )
                .attr( "class", "y axis" )
                .attr( "transform", "translate(" + 154 + "," + 0 + ")" )
                .call( yAxis );

            humiditySVG.selectAll( "text" )
                .attr( "class", function ( d ) {
                                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return "subtick";
                           }
                           return;
                       } );
            humiditySVG.selectAll( "line" )
                .attr( "x2", function ( d ) {
                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return 1;
                           } else {
                               return 3;
                           }
                           return;
                       } );