CODEWITHSUNDEEP
d3.js
Union find
Union find

Reputation: 8150

Removing the raised corners from d3.js axes to create flat axis

D3.js axes typically have "handlebars" on the end of each axis, like this:

axis1

Those look nice. But.

How can these be removed to make an axis look flat, like this:

axis2

Upvotes: 3

Views: 364

Answers (1)

ckersch
ckersch

Reputation: 7687

The square ends of the path are sized using either the .tickSize method, in which case the second argument gives the outer tick size and the first the main tick size, or else using the .outerTickSize method. In either case, supply a value of 0 to suppress the ticks.

ticks.tickSize(innerTickHeight, 0);

or

ticks.outerTickSize(0);

Source: page on d3 axes.

Upvotes: 7

Related Questions