CODEWITHSUNDEEP
javascriptcsssvgd3.js
Sumit Surana
Sumit Surana

Reputation: 1584

d3.js: The xaxis labels are showing bold for a line chart

I am trying to create a line chart using d3.js and by default without any text css the following code is showing bold labels for the xaxis.

var svg = d3.select(element).append("svg")
      .attr("width", "800")
      .attr("height", "150")
      .append("g")
      .attr("transform", "translate(20, 20)");

var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

svg.append("g")
  .style('fill', 'none')
  .style('stroke', '#000')
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

I tried to search through many posts in stack exchange as to why this is happening but couldn't get any leads. Anyone have any ideas or suggestions that can help me deal the automatic bolding of the x-axis labels.

Upvotes: 0

Views: 1658

Answers (2)

Sumit Surana
Sumit Surana

Reputation: 1584

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 = d3.select(element).append("svg")
  .attr("width", "800")
  .attr("height", "150")
  .append("g")
  .attr("transform", "translate(20, 20)");

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

svg.append("g")
  .style('fill', 'none')
  //should remove the stroke from this place.
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

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:

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.

Upvotes: 3

UberKaeL
UberKaeL

Reputation: 458

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:

svg.append("g")
  .style('fill', 'none')
  .style('stroke', '#000')
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .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;
}

Upvotes: 1

Related Questions