title: Why is there no x or y axis shown on this d3 chart?
body: <p>I have a d3 chart as follows.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;svg&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var margin = {top: 10, right: 10, bottom: 10, left: 10},
  width = 960,
  height = 500;
  
  var startOfWeek = moment().startOf("week").toDate();
  var endOfWeek = moment().endOf("week").toDate();
  
  var dxSyncEvents = [];
  var now = moment();
  
  var times = [];
  var sites = [];
  
  /*
  Some stuff that pushes JS Date objects onto times[] and strings onto sites[]
  */
  
  var xScale = d3.time.scale().domain([startOfWeek, endOfWeek]).range([0, 960]);
  var yScale = d3.scale.ordinal().domain(sites).rangePoints(500, 10);
  
  var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
      .ticks(d3.time.hours, 12)
      .tickFormat(d3.time.format('%H:%M'))
      .tickSize(8)
      .tickPadding(8);
  var yAxis = d3.svg.axis().scale(yScale).orient("left");
  
  d3.select("svg")
      .attr("width", width)
      .attr("height", height)
      .selectAll("circle")
      .data(times)
      .enter().append("circle")
      .attr("r", "10px")
      .attr("fill", "black")
      .attr("cx", xScale)
      .attr("cy", yScale)
      .call(xAxis)
      .call(yAxis);
  </code></pre>
  
  <p>Why is it that I don't get any axes on the chart? Can't see them on the screen and can't see them in the DOM in the developer tools. I do see some circles, however.</p>
  
  <p>There are some console errors that don't offer much help:</p>
  
  <pre><code>Error: Invalid value for &lt;path&gt; attribute d="M-6,undefinedH0VundefinedH-6" 
  Error: Invalid value for &lt;g&gt; attribute transform="translate(0,NaN)" (twice)
  </code></pre>