Accepted answer

I think is because call axis will add a black domain path, you can hide it or use for different purposes. I usually do something like that:

  .style('fill', 'none')
  .style('stroke', '#000')
  .attr("transform", "translate(0," + height + ")")
  .attr("class", "xAxis"); //Adding xAxis class

and then hide it (CSS in this case)

.xAxis .domain {
  display: none;

or maybe (not sure)

.xAxis path {
  display: none;


After trying out many times I found that I needed was just to remove the stroke attribute from the code and instead should have coded as below:

var svg ="svg")
  .attr("width", "800")
  .attr("height", "150")
  .attr("transform", "translate(20, 20)");

var xAxis = d3.svg.axis()

  .style('fill', 'none')
  //should remove the stroke from this place.
  .attr("transform", "translate(0," + height + ")")

because placing the stroke there was getting attached to the text of my labels on the X axis too. And by using the idea of @UberKaeL for placing a class in my code called xAxis, I placed the following sass code for xAxis:

  fill: none;
  line, path {
    stroke: #000;

And that solved my problem.

And a point of caution, just so that the beginners like me who might come across this post don't use stroke to color your text in svg, it will make it look bold automatically instead use fill to change the color of the text. Its another mistake, that I had bang my head on while trying to solve the issue.

Related Query