CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
Cybernetic
Cybernetic

Reputation: 13354

Changing "fill" style on axis tick labels not working (d3.js)

I am making a line chart using the example here.

I am trying to change the axis tick label color but "fill" is not working. I don't want to change it using CSS, it has to be changed using D3.

I tried the following on the appropriate axis section: 

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .attr("stroke", "yellow")
    .style("fill", "yellow")
    .style("font-size", "14px")
    .call(d3.axisBottom(x));

The stroke and font-size change perfectly, but the fill has no effect. I tried changing .style to .attr but still nothing.

Here is the FIDDLE. Line 45 in the HTML I set it to green with no effect.

enter image description here

Upvotes: 1

Views: 1099

Answers (2)

Arun AK
Arun AK

Reputation: 4370

I made a small change in your code.

g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll('text')
  .style("fill", "yellow")

Here is the jsFiddle

Hope it helps :)

Upvotes: 0

Jasdeep Singh
Jasdeep Singh

Reputation: 8321

You want to change the color of x axis tick labels, so you need to select those labels and apply the fill value to it.

You can write the below code and accomplish your task, select all x-axis text and apply color to it.

d3.selectAll('g.axis--x text')
      .style('fill', 'green')

Please find the complete working instance below:

data = [
    {"year" : "2005", "value": 771900},
    {"year" : "2006", "value": 771500},
    {"year" : "2007", "value": 770500},
    {"year" : "2008", "value": 770400},
    {"year" : "2009", "value": 771000},
    {"year" : "2010", "value": 772400},
    {"year" : "2011", "value": 774100},
    {"year" : "2012", "value": 776700},
    {"year" : "2013", "value": 777100},
    {"year" : "2014", "value": 779200},
    {"year" : "2015", "value": 782300}
]

make_graph(data)
body {
  background-color: #F1F3F3    
}
.axis {
	font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: #6F257F;
  stroke-width: 5px;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: #F1F3F3;
  stroke: #6F257F;
  stroke-width: 5px;
}
  
.hover-line {
  stroke: #6F257F;
  stroke-width: 2px;
  stroke-dasharray: 3,3;
}
<!DOCTYPE html>
<meta charset="utf-8">

<body>
  <svg width="400" height="200"></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    function make_graph(data) {
      var svg = d3.select("svg"),
        margin = {
          top: 20,
          right: 20,
          bottom: 30,
          left: 40
        },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;
      var parseTime = d3.timeParse("%Y")
      bisectDate = d3.bisector(function(d) {
        return d.year;
      }).left;
      var x = d3.scaleTime().range([0, width]);
      var y = d3.scaleLinear().range([height, 0]);
      var line = d3.line().x(function(d) {
        return x(d.year);
      }).y(function(d) {
        return y(d.value);
      });
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      data.forEach(function(d) {
        d.year = parseTime(d.year);
        d.value = +d.value;
      });
      x.domain(d3.extent(data, function(d) {
        return d.year;
      }));
      y.domain([d3.min(data, function(d) {
        return d.value;
      }) / 1.005, d3.max(data, function(d) {
        return d.value;
      }) * 1.005]);
      g.append("g")
        .attr("class", "axis axis--x")
        .style('font-family', 'Impact')
        .style("fill", "green")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

      d3.selectAll('g.axis--x text')
        .style('fill', 'green')

      g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).ticks(6)
          .tickFormat(function(d) {
            return parseInt(d / 1000) + "k";
          }))
        .append("text")
        .attr("class", "axis-title")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .attr("fill", "#5D6971")
        .text("Population)");
      g.append("path").datum(data)
        .attr("class", "line")
        .attr("d", line);
      var focus = g.append("g")
        .attr("class", "focus")
        .style("display", "none");
      focus.append("line")
        .attr("class", "x-hover-line hover-line")
        .attr("y1", 0)
        .attr("y2", height);
      focus.append("line")
        .attr("class", "y-hover-line hover-line")
        .attr("x1", width)
        .attr("x2", width);
      focus.append("circle")
        .attr("r", 7.5);
      focus.append("text")
        .attr("x", 15)
        .attr("dy", ".31em");
      svg.append("rect")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("class", "overlay").attr("width", width)
        .attr("height", height)
        .on("moseover", function() {
          focus.style("display", null);
        })
        .on("mouseout", function() {
          focus.style("display", "none");
        })
        .on("mousemove", mousemove);

      function mousemove() {
        var x0 = x.invert(d3.mouse(this)[0]),
          i = bisectDate(data, x0, 1),
          d0 = data[i - 1],
          d1 = data[i],
          d = x0 - d0.year > d1.year - x0 ? d1 : d0;
        focus
          .attr("transform", "translate(" + x(d.year) + "," + y(d.value) + ")");
        focus.select("text").text(function() {
          return d.value;
        });
        focus.select(".x-hover-line").attr("y2", height - y(d.value));
        focus.select(".y-hover-line").attr("x2", width + width);
      }
    }
  </script>

Upvotes: 2

Related Questions