使用带有D3的折线图中x轴顺序刻度的rangePoints时数据线消失

Question

我已从多行折线图示例here中调整了此代码。在研究我需要做出哪些改变之后，我现在遇到的最大问题是当我在x轴顺序刻度上使用.rangePoints时数据线消失了。只有.range，x轴不显示任何内容，数据线沿y轴左侧聚集。这与我将原始代码从时间尺度改为序数这一事实有关，但我对于我需要做出哪些进一步的改变感到难过。

以下代码：

var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 280 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
.rangePoints([0, width]);

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

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var line = d3.svg.line()
.interpolate("linear")
.x(function(d) { return x(d.episodes); })
.y(function(d) { return y(d.season); });

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("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "episodes"; }));

var seasons = color.domain().map(function(name) {
return {
  name: name,
  values: data.map(function(d) {
    return {date: d.episodes, season: +d[name]};
  })
    };
  });

  x.domain(data.map(function(d) { return d.episodes; }));

  y.domain([
d3.min(seasons, function(c) { return d3.min(c.values, function(v) { return v.season; }); }),
d3.max(seasons, function(c) { return d3.max(c.values, function(v) { return v.season; }); })
  ]);

  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("Viewership (in mlns)");

  var s = svg.selectAll(".city")
  .data(seasons)
.enter().append("g")
  .attr("class", "city");

  s.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.name); });

  s.append("text")
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.season) + ")"; })
  .attr("x", 3)
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });
});