d3 v4 error: "Unexpected value parsing width attribute." in grouped bar chart

Question

I am trying to create a d3 (version 4) grouped bar chart with my own data, based on Mike Bostock's great example. I had to change all d3 v3 outdated functions to the new v4 ones (e.g. d3.scale.ordinal -> d3.scaleOrdinal) but then I got errors relating to the 'width' and 'x' attributes of the rect bars:

• 'Unexpected value 0,0,900 parsing width attribute.'
• 'Unexpected value 0,900 parsing x attribute.'

here is the relevant part of the code:

var x0 = d3.scaleBand()
        .range([0, width])
        .round(true);

var x1 = d3.scaleOrdinal();

var y = d3.scaleLinear()
        .range([height, 0]);

var xAxis = d3.axisBottom()
        .scale(x0);

var yAxis = d3.axisLeft()
        .scale(y);

var svg = d3.select("body").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 + ")");

d3.csv("myData.csv", function(error, data) {
      if (error) throw error;

      var yearNames = d3.keys(data[0]).filter(function(key) { return key !== "Unit"; });

      data.forEach(function(d) {
        d.years = yearNames.map(function(name) { return {name: name, value: +d[name]}; });

      });


 x0.domain(data.map(function(d) { return d.Unit; }));
 x1.domain(yearNames).range([0, x0.range()]);
 y.domain([0, d3.max(data, function(d) { return d3.max(d.years, function(d) { return d.value; }); })]);

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

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

 var unit = svg.selectAll(".unit")
          .data(data)
        .enter().append("g")
          .attr("class", "unit")
          .attr("transform", function(d) { return "translate(" + x0(d.Unit) + ",0)"; });

 unit.selectAll("rect")
        .data(function(d) { return d.years; })
        .enter().append("rect")
          .attr("width", x1.range())
          .attr("x", function(d) { return x1(d.name); })
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); })
          .style("fill", function(d) { return color(d.name); });

   });

and here is the csv data:

Unit,2012,2013
Comp,54.13809524,52.25
Edu,20.39642857,18.75
Bus,16.3,18.5
SoW,16.08,7
Pharm,45,59
Agr,150.3,122.51
Soc,105.2,112.72
Nat,264.86,277.73
Hum,61.73174603,52.91
Law,14.5,22.33
Dent,27.5,11.5
Med,149.1,147.33
Vet,15,19
Jew,1,0.25
Bra,2.5,4

Answer 1

Most of your problems come from an incorrect usage of .range(). For example here:

x1.domain(yearNames).range([0, x0.range()]);

and here:

.attr("width", x1.range())

.range return an array, which is not what you want.

Further, you probably don't want x1 to be a scaleOrdinal but rather a scaleBand. I'd set it up like this:

  x0.domain(data.map(function(d) {
    return d.Unit;
  }));

  // set a sane bar width
  var barWidth = x0.bandwidth() / yearNames.length,
      barPadding = barWidth * 0.3;

  // set up x1 as a scaleBand with padding
  x1.domain(yearNames).range([barPadding , x0.bandwidth() - barPadding]);
  y.domain([0, d3.max(data, function(d) {
    return d3.max(d.years, function(d) {
      return d.value;
    });
  })]);

Running code here.