d3 stacked to grouped bar chart date axis

Question

I am building a d3 function to build a grouped bar chart that can transition into a stacked bar chart. Everything was working fine until I tried to bring in date values for the x-axis. Now the chart only graphs one bar. The X axis shows correctly but the position of the rectangles seems to be off. My jsFiddle is posted at the bottom of the code.

function createChart(inputdata,chartname,inputtop,inputbottom,inputwidth,inputheight){

var stack = d3.layout.stack(),
    layers = inputdata,
    m = layers[0].length, // number of samples per layer
    n = layers.length, // number of layers
    data = stack(d3.range(n).map(function(d) { return layers[d]; }));


var yGroupMax = d3.max(data, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
    yStackMax = d3.max(data, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });


var margin = {top: inputtop, right: 10, bottom: inputbottom, left: 10},
    width = inputwidth - margin.left - margin.right,
    height = inputheight - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(d3.range(m))
    .rangeRoundBands([0, width], .08);

var xTime = d3.time.scale()
    .domain([new Date("2016-01-01"), d3.time.day.offset(new Date("2016-01-04"), 1)])
    .rangeRound([0, width - margin.left - margin.right]); 


var xAxisTime = d3.svg.axis()
    .scale(xTime)
    .orient('bottom')
    .ticks(d3.time.days, 1)
    .tickFormat(d3.time.format('%a %d'))
    .tickSize(0)
    .tickPadding(8);


var y = d3.scale.linear()
    .domain([0, yStackMax])
    .range([height, 0]);

var color = d3.scale.linear()
    .domain([0, n - 1])
    .range(["#aad", "#556"]);



var yAxis = d3.svg.axis()
                  .scale(y)
                  .orient("left")
                  .tickSize(2)
                  .tickPadding(6)
                  .outerTickSize(0);

var svg = d3.select(chartname).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var layer = svg.selectAll(".layer")
    .data(data)
  .enter().append("g")
    .attr("class", "layer")
    .style("fill", function(d, i) { return color(i); });

var rect = layer.selectAll("rect")
    .data(function(d) { return d; })
  .enter().append("rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", height)
    .attr("width", x.rangeBand())
    .attr("height", 0);

rect.transition()
    .delay(function(d, i) { return i * 10; })
    .attr("y", function(d) { return y(d.y0 + d.y); })
    .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxisTime)

svg.append("g")
    .attr("class", "yaxis")
    .attr("transform", "translate(" + (Number(margin.left) + 14) + ",0)")
    .call(yAxis);      

svg.select("g.yaxis").selectAll(".tick")
    .each(function (d) {
        if ( d === 0 ) {
            this.remove();
        }
    });

d3.selectAll("input").on("change", change);


var timeout = setTimeout(function() {
  d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
  d3.select("input[value=\"0\"]").property("checked", true).each(change);
}, 2000);



function change() {
  clearTimeout(timeout);
  if (this.value === "grouped") transitionGrouped();
  if (this.value === "stacked") transitionStacked();
  //else transitionStacked();
}



function transitionGrouped() {
  y.domain([0, yGroupMax]);

var allchart = d3.selectAll(".chart").selectAll(".layer").selectAll("rect"),
    axistran = d3.selectAll(".chart");

  allchart.transition()
      .ease("linear")
      .duration(300)
      .delay(function(d, i) { return i * 10; })
      .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
      .attr("width", x.rangeBand() / n)
    .transition()
      .duration(200)
      .ease("linear")
      .attr("y", function(d) { return y(d.y); })
      .attr("height", function(d) { return height - y(d.y); });


  axistran.select("g.yaxis").transition()
     .duration(600)
     .call(yAxis);  

  axistran.select("g.yaxis").selectAll(".tick")
    .each(function (d) {
        if ( d === 0 ) {
            this.remove();
        }
    });
};


function transitionStacked() {
  y.domain([0, yStackMax]);

var allchart = d3.selectAll(".chart").selectAll(".layer").selectAll("rect"),
    axistran = d3.selectAll(".chart");

  allchart.transition()
      .ease("linear")
      .duration(300)
      .delay(function(d, i) { return i * 10; })
      .attr("y", function(d) { return y(d.y0 + d.y); })
      .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
    .transition()
      .duration(200)
      .ease("linear")
      .attr("x", function(d) { return x(d.x); })
      .attr("width", x.rangeBand());

      axistran.select("g.yaxis").transition()
         .duration(600)
         .call(yAxis); 

      axistran.select("g.yaxis").selectAll(".tick")
    .each(function (d) {
        if ( d === 0 ) {
            this.remove();
        }
    });

};


};

JSFiddle Link

Answer 1

You've created a time scale in variable xTime, but you aren't using it to draw the rects:

var rect = layer.selectAll("rect")
    .data(function(d) {
      return d;
    })
    .enter().append("rect")
    .attr("x", function(d) {
      return xTime(new Date(d.x)); //<-- don't use x here
    });

Also, If you are using a time axis, I recommend changing your input data into datetimes instead of new Date( everywhere.

Finally, your selections are wrong in your transitions.

Here it is all fixed up:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: auto;
      position: relative;
      width: 700px;
    }
    
    text {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    form {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  </style>
</head>

<body>
  <form>
    <label>
      <input type="radio" name="mode" value="grouped" /> Grouped
    </label>
    <label>
      <input type="radio" name="mode" value="stacked" checked="" /> Stacked
    </label>
  </form>
  <chart_1></chart_1>
  <script>
    var layers = [{
      "x": "2016-01-01",
      "y": 4,
      "z": 5
    }, {
      "x": "2016-01-02",
      "y": 5,
      "z": 6
    }, {
      "x": "2016-01-03",
      "y": 6,
      "z": 3
    }, {
      "x": "2016-01-04",
      "y": 7,
      "z": 1
    }];

    var converted = convertjson(layers, "x", ["y", "z"]);


    createChart(converted, "chart_1", 40, 20, 700, 550);



    function createChart(inputdata, chartname, inputtop, inputbottom, inputwidth, inputheight) {
      
      var stack = d3.layout.stack(),
        layers = inputdata,
        m = layers[0].length, // number of samples per layer
        n = layers.length, // number of layers
        data = stack(d3.range(n).map(function(d) {
          return layers[d];
        }));


      var yGroupMax = d3.max(data, function(layer) {
          return d3.max(layer, function(d) {
            return d.y;
          });
        }),
        yStackMax = d3.max(data, function(layer) {
          return d3.max(layer, function(d) {
            return d.y0 + d.y;
          });
        });


      var margin = {
          top: inputtop,
          right: 10,
          bottom: inputbottom,
          left: 10
        },
        width = inputwidth - margin.left - margin.right,
        height = inputheight - margin.top - margin.bottom;

      var x = d3.scale.ordinal()
        .domain(d3.range(m))
        .rangeRoundBands([0, width], .08);

      var xTime = d3.time.scale()
        .domain([new Date("2016-01-01"), d3.time.day.offset(new Date("2016-01-04"), 1)])
        .rangeRound([0, width - margin.left - margin.right]);


      var xAxisTime = d3.svg.axis()
        .scale(xTime)
        .orient('bottom')
        .ticks(d3.time.days, 1)
        .tickFormat(d3.time.format('%a %d'))
        .tickSize(0)
        .tickPadding(8);


      var y = d3.scale.linear()
        .domain([0, yStackMax])
        .range([height, 0]);

      var color = d3.scale.linear()
        .domain([0, n - 1])
        .range(["#aad", "#556"]);



      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickSize(2)
        .tickPadding(6)
        .outerTickSize(0);

      var svg = d3.select(chartname).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var layer = svg.selectAll(".layer")
        .data(data)
        .enter().append("g")
        .attr("class", "layer")
        .style("fill", function(d, i) {
          return color(i);
        });

      var rect = layer.selectAll("rect")
        .data(function(d) {
          return d;
        })
        .enter().append("rect")
        .attr("x", function(d) {
          return xTime(d.x);
        })
        .attr("y", height)
        .attr("width", x.rangeBand())
        .attr("height", 0);

      rect.transition()
        .delay(function(d, i) {
          return i * 10;
        })
        .attr("y", function(d) {
          return y(d.y0 + d.y);
        })
        .attr("height", function(d) {
          return y(d.y0) - y(d.y0 + d.y);
        });

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxisTime)

      svg.append("g")
        .attr("class", "yaxis")
        .attr("transform", "translate(" + (Number(margin.left) + 14) + ",0)")
        .call(yAxis);

      svg.select("g.yaxis").selectAll(".tick")
        .each(function(d) {
          if (d === 0) {
            this.remove();
          }
        });

      d3.selectAll("input").on("change", change);

/*
      var timeout = setTimeout(function() {
        d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
        d3.select("input[value=\"0\"]").property("checked", true).each(change);
      }, 2000);
*/


      function change() {
        //clearTimeout(timeout);
        if (this.value === "grouped") transitionGrouped();
        if (this.value === "stacked") transitionStacked();
        //else transitionStacked();
      }



      function transitionGrouped() {

        y.domain([0, yGroupMax]);

        var allchart = d3.selectAll(".layer").selectAll("rect"),
          axistran = d3.selectAll(".chart");
          
          console.log(allchart)

        allchart.transition()
          .ease("linear")
          .duration(300)
          .delay(function(d, i) {
            return i * 10;
          })
          .attr("x", function(d, i, j) {
            return xTime(d.x) + x.rangeBand() / n * j;
          })
          .attr("width", x.rangeBand() / n)
          .transition()
          .duration(200)
          .ease("linear")
          .attr("y", function(d) {
            return y(d.y);
          })
          .attr("height", function(d) {
            return height - y(d.y);
          });


        axistran.select("g.yaxis").transition()
          .duration(600)
          .call(yAxis);

        axistran.select("g.yaxis").selectAll(".tick")
          .each(function(d) {
            if (d === 0) {
              this.remove();
            }
          });
      };


      function transitionStacked() {
        y.domain([0, yStackMax]);

        var allchart = d3.selectAll(".layer").selectAll("rect"),
          axistran = d3.selectAll(".chart");

        allchart.transition()
          .ease("linear")
          .duration(300)
          .delay(function(d, i) {
            return i * 10;
          })
          .attr("y", function(d) {
            return y(d.y0 + d.y);
          })
          .attr("height", function(d) {
            return y(d.y0) - y(d.y0 + d.y);
          })
          .transition()
          .duration(200)
          .ease("linear")
          .attr("x", function(d) {
            return xTime(d.x);
          })
          .attr("width", x.rangeBand());

        axistran.select("g.yaxis").transition()
          .duration(600)
          .call(yAxis);

        axistran.select("g.yaxis").selectAll(".tick")
          .each(function(d) {
            if (d === 0) {
              this.remove();
            }
          });

      };


    };


    function convertjson(data, xValue, yArray) {
      var arrayconvertedjson = [];
      var convertedjson = [];

      for (var j = 0; j < yArray.length; j++) {
        for (var i = 0; i < data.length; i++) {
          convertedjson.push({
            "x": new Date(data[i][xValue]),
            "y": data[i][yArray[j]]
          });
        };
        arrayconvertedjson.push(convertedjson)
        convertedjson = [];
      };
      return arrayconvertedjson;
    };
  </script>
</body>

</html>