CODEWITHSUNDEEP
d3.jsvisualization
daikonradish
daikonradish

Reputation: 702

make x axis and ticks disappear in d3

I'd like to make only the x-axis labels disappear. Currently, I have the following code, but it makes the entire x-axis disappear, and I'd like to keep the horizontal line.

Is there a way to just target the ticks and the text alone?

// Make x-axis
let xAxis = d3.axisBottom(scaleX);
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .attr("opacity", 0.7)
  .call(xAxis);

// Target x-axis; but this targets the entire axis
let setXAxisOpacity = (opacity, duration=120) => {
    d3.select(".axis")
     .transition()
     .duration(duration)
     .ease(d3.easeLinear)
     .style("opacity", opacity)
}

Upvotes: 0

Views: 255

Answers (1)

rioV8
rioV8

Reputation: 28663

you need to target the text and line parts of the axis

d3.select('.axis').selectAll('text')
     .transition()
     .duration(duration)
     .ease(d3.easeLinear)
     .style("opacity", opacity);
d3.select('.axis').selectAll('line')
     .transition()
     .duration(duration)
     .ease(d3.easeLinear)
     .style("opacity", opacity);

Upvotes: 1

Related Questions