title: Ordinal scale's rangeRoundBands()
body: <p>I'm building a bar chart that will have a varied number of data points. All the examples I've seen use an ordinal scale for the x axis, then call <code>rangeRoundBands()</code> to get the width for the bars.</p>
  
  <p>I'm getting the error "Uncaught TypeError: Cannot read property '1' of undefined" when I try to called <code>.rangeRoundBands()</code> and as far as I can tell I'm setting the scale up properly.</p>
  
  <p><a href="http://jsfiddle.net/rLzbbec0/1/" rel="nofollow">http://jsfiddle.net/rLzbbec0/1/</a></p>
  
  <pre><code>var globOb = {
  bar: {
      height: 390,
      width: 675,
      innerHeight: 300,
      innerWidth: 615,
      margin: {
          bottom: 70,
          left: 40,
          right: 20,
          top: 20
      }
  },
  barData: [
      { task: "meetingsTask", val: 2.5    },
      { task: "reportsTask", val: 3 },
      { task: "emailsTask", val: 2 },
      { task: "planningTask", val: 1.5 },
      { task: "clientsTask", val: 4 },
      { task: "dataAnalysisTask", val: 3 }
  ]};
  
  //Set X Scale
  var xScale = d3.scale.ordinal()
      .rangeRoundBands([0, globOb.bar.innerWidth], .05, .1);
  
  xScale.domain(globOb.barData.map(function(d) {
      return d.task
  }));
  
  //Set Y Scale
  var yScale = d3.scale.linear()
      .domain([0, d3.max(globOb.barData, function(d) {
          return d.val + 1
      })])
      .range([globOb.bar.innerHeight, 0]);
  
  
  //Grab SVG and set dimensions
  var svg = d3.select("#viewport").append("svg")
      .attr("width", globOb.bar.width)
      .attr("height", globOb.bar.height);
  
  //Set the drawing area of the SVG
  var inner = svg.append("g")
      .attr("transform", "translate(" + globOb.bar.margin.left + "," +
          globOb.bar.margin.top + ")")
      .attr("width", globOb.bar.innerWidth)
      .attr("height", globOb.bar.innerHeight);
  
  //Setup Axes
  var xAxis = d3.svg.axis()
      .scale(xScale)
      .innerTickSize(0)
      .outerTickSize(-globOb.bar.innerHeight)
      .orient("bottom");
  
  var yAxis = d3.svg.axis()
      .scale(yScale)
      .innerTickSize(-globOb.bar.innerWidth)
      .outerTickSize(-globOb.bar.innerWidth)
      .orient("left");
  
  //Add X Axis
  inner.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + (globOb.bar.innerHeight) + ")")
      .call(xAxis);
  
  //Add Y axis
  inner.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0,0)")
      .call(yAxis);
  
  
  //draw data
  inner.selectAll("bar")
      .data(globOb.barData)
      .enter()
      .append("rect")
      .attr("class", function(d) {
          return d.task.substring(0, d.task.length - 4) + "-bar"
      })
      .attr("x", function(d) {
          return xScale(d.task)
      })
      .attr("width", 50) //xScale.rangeRoundBands())
      .attr("y", function(d) {
          return yScale(d.val)
      })
      .attr("height", function(d) {
          return globOb.bar.innerHeight - yScale(d.val)
      });
  
  console.log(xScale.rangeRoundBands());
  </code></pre>
  
  <p>In the fiddle I have changed the call of <code>rangeRoundBands()</code> to a set number to show the chart otherwise draws fine.  At the end I'm using <code>console.log()</code> to show the error with <code>.rangeRoundBands()</code>.</p>