score:20

Accepted answer

The axis.tick* functions can help you there. You have a number of possibilities to prevent the behaviour you're describing. You could set the ticks explicitly using the tickValues() function. Or you could set the size of the end ticks to 0 using tickSize(). You can also control the underlying scale using the ticks() function.

Depending on your particular scenario, one of these options may make more sense than the others.

score:-3

Just remove both axis:

d3.selectAll('.axis').remove();

score:0

This will remove the whole axis. This does not answer the question posted.

score:1

I'not sure, what the outer tick size has to do with the first or last tick of an axis.


tickSize actually controls the length of the <line> element inside of the tick group. Therefore it deals with the distance between the <text> element of the tick and the axis or the length of helper lines starting at the tick positions, which depends on the orientation of the axis and where it has been moved to (via css translate()).

This is how a tick group looks like:

<g transform="translate(10,0)" style="opacity: 1;" class="tick">
   <line x2="0" y2="-15"></line>
   <text x="0" y="-18" style="text-anchor: middle;" dy="0em">0.0</text>
</g>

Now you can control the x2 and the y2 attribute of the <line> element with the tickSize method. Here I'm using tickSize(15, 0) and orientation('top') for the x axis, which has been moved to the bottom of the chart. So the lables of the ticks project into the chart in a quite messy way.

score:1

Working solution for D3 v5.9.2:

  1. After you declared yAxis and set the attributes, wrap it in a g and call it:

     svg.append("g").attr("id", "yAxisG").call(yAxis);
    
  2. Remove the first <path> element from the axis group:

     d3.select("g#yAxisG").select("path").remove();
    

score:3

Remove end ticks using something like this: note tickSize(inner, outer)

var xAxis = d3.svg.axis().scale(x).
                tickSize(3, 0).orient("bottom").tickFormat( ... );

If you put outer param to 0 in tickSize(inner, outer) you will not get the outer ticks.

score:8

If you want to just hide the bounding values and keep the implicit behavior in the middle, you can modify the axis SVG object just after you draw it

Say, here you draw/update your axis:

g.selectAll(".x.axis").call(xAxis);

Now g will contain .tick classed objects. each of them will refer to one tick value. You can select them and set visibility attribute:

d3.select(g.selectAll(".tick")[0][0]).attr("visibility","hidden");

Alternatively, you can address any specific tick by its value d or index i

g.selectAll(".tick")
    .each(function (d, i) {
        if ( d == 0 ) {
            this.remove();
        }
    });

Be careful with .remove() though. Sometimes the first value is removed already and it removes the second value on update. Visibility hidden is more reliable.

credit to Ian & Denis at d3-js google group https://groups.google.com/forum/#!topic/d3-js/LBxR_finiME

score:10

In d3.js v4.x use .tickSizeOuter(0), like:

self._leftAxis = d3.axisLeft(self._y)
      .tickSizeInner(3) // the inner ticks will be of size 3
      .tickSizeOuter(0); // the outer ones of 0 size

Note that the zero tick below is considered a inner on

enter image description here

This d3.js v4 doc: https://github.com/d3/d3-axis

score:117

For anyone who got to this question because all you want to do is remove the two end ticks from an axis, this will do the trick:

.outerTickSize(0)

Add that to any axis call you make, such as:

d3.svg.axis().outerTickSize(0)

Related Query