CODEWITHSUNDEEP
javascriptd3.js
learner
learner

Reputation: 1023

Axes Labels missing upon conversion from v3 to v4

Axis labels went missing when I converted the code from D3.js v3 to v4. I cannot figure out why.

The code corresponding to axis in v4 is as follows:

    // setup x 
    var xValue = function(d) { return d[xText];}, // data -> value
        xScale = d3.scaleLinear().range([0, width]), // value -> display
        xMap = function(d) { return xScale(xValue(d));}, // data -> display
        xAxis = d3.axisBottom(xScale);

    // setup y
    var yValue = function(d) { return d[yText];}, // data -> value
        yScale = d3.scaleLinear().range([height, 0]), // value -> display
        yMap = function(d) { return yScale(yValue(d));}, // data -> display
        yAxis = d3.axisLeft(yScale)


      // x-axis
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
        .append("text")
          .attr("class", "label")
          .attr("x", width)
          .attr("y", -6)
          .style("text-anchor", "end")
          .text(xText);

      // y-axis
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("class", "label")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text(yText);

The v3 displays the label just fine. And below is the original code.

    // setup x 
    var xValue = function(d) { return d[xText];}, // data -> value
        xScale = d3.scale.linear().range([0, width]), // value -> display
        xMap = function(d) { return xScale(xValue(d));}, // data -> display
        xAxis = d3.svg.axis().scale(xScale).orient("bottom");

    // setup y
    var yValue = function(d) { return d[yText];}, // data -> value
        yScale = d3.scale.linear().range([height, 0]), // value -> display
        yMap = function(d) { return yScale(yValue(d));}, // data -> display
        yAxis = d3.svg.axis().scale(yScale).orient("left");

Upvotes: 1

Views: 178

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

Unlike D3 v3, D3 v4/5 axes have a fill: none value as default, which is being inherited by the <text>.

Therefore, you just need to set the fill for your texts. For instance:

// x-axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("class", "label")
    .attr("x", width)
    .attr("y", -6)
    .style("text-anchor", "end")
    .style("fill", "black")//<---- here
    .text(xText);

Upvotes: 1

Related Questions