How to remove the first tick in d3

user_4311354 0
Viewed 3721

I am drawing a graph using d3.

let y = scaleLinear().rangeRound([height, 0]);
let y_axis = axisLeft(y);

g.append("g").attr("transform", "translate(transltion," + height + ")")
   .call(axisRight(y).ticks(tick))
   .attr("transform", "translate(" + yLeftTrasltion+ "," + yBotmrasltion + ")");

This is plotting 0, 10, 20, 30, 40, 50. Now, I want it to not display 0. How can I achieve this?

d3.js
4 Answers

To remove the 0 and with that the first tick you have two options:

  1. Call .tickValues() on the axis elements and pass it an array of values that you would like to display. So in your case without the 0 it would be [10,20,30,40,50]. That way you will no longer get a 0 rendered on the axis. Full example would look like this:

axisRight(y).tickValues([10,20,30,40,50]);

  1. More manual option is to run a select and remove it manually. Let's say your axis has a class .axis. You could run a d3 select to remove first tick manually. Beware that option 1 is a lot nicer and cleaner though. The manual removal would look like this:

d3.select('.axis .tick:first-child').remove()

user_68229330

Use 'fill-opacity'.

.style('fill-opacity', d => d === 0 ? 0.0 : 1.0)
user_11153320

This would help x_axis = d3.axisBottom() .scale(xscale).tickSizeOuter([40]).tickSizeInner([0]);

user_131514810

You can use CSS:

.tick:first-of-type line{
    fill: none;
    stroke: none;
}
user_18417100
Related