title: How to style axis in stacked bar chart-d3.js
body: <p>I have made a stacked bar chart by using the example at <a href="http://bl.ocks.org/mbostock/3886208" rel="nofollow noreferrer">http://bl.ocks.org/mbostock/3886208</a></p>
  
  <p>My problem is that I want my page to have a black background and I can't seem to style the x and y axis with a different color. It seems like an easy task.</p>
  
  <p>This is what I have tried:</p>
  
  <pre><code>   g.append("g")
      .attr("class", "axis axis_x")
      .attr("transform", "translate(0," + height + ")")
      .style("font", "14px sans-serif")
  
      //this did not work. 
      .attr("fill", "#f00")
  
      .call(d3.axisBottom(x));
  </code></pre>
  
  <p>I also tried to add a css property to the class 'axis'. That did not work. However, this worked to change the font size:</p>
  
  <pre><code> .style("font", "14px sans-serif")
  </code></pre>
  
  <p>Also, in the same code for the legend, this did work to change the color of the legend:</p>
  
  <pre><code>   g.append("g")
    .attr("class", "axis axis_y")
    .call(d3.axisLeft(y).ticks(10, "s"))
  .append("text")
  .classed('x_axis', true)
    .attr("x", 2)
    .attr("y", y(y.ticks(10).pop()))
    .attr("dy", "0.35em")
    .attr("text-anchor", "start")
  
    //this did not work. 
    .attr("fill", "#f00")
  
    .style("font", "20px sans-serif")
    .text("Calories");
  </code></pre>
  
  <p>So my question is why can't I change the color or fill of the x and y axis just like how I changed the color or fill of the legend. </p>
  
  <p>Any help will be greatly appreciated.</p>