Javascript D3 v4 xAxis缩放返回x，因为无法完成重新缩放（x）

我试图实现一个以x轴为日期格式的缩放选项。 下面是代码示例：

var margin = {
top: 20,
right: 20,
bottom: 40,
left: 100
  },
  svgWidth = 800,
  svgHeight = 500,
  width = svgWidth - margin.left - margin.right,
  height = svgHeight - margin.top - margin.bottom;

svg = d3.select('body')
  .append("svg")
  .attr("style", "width: " + svgWidth + "px\; height: " + svgHeight + "px\;");

var x = d3.scaleUtc().range([0, width])
  .domain([new Date("3/12/2017"), new Date("3/30/2017")]);

var y = d3.scaleBand()
  .range([height, 0])
  .padding(0.1)
  .domain(["test"])

var xAxis = d3.axisBottom(x)
  .tickFormat(d3.utcFormat("%m-%d"));

var yAxis = d3.axisLeft(y);

var zoom = d3.zoom()
  .scaleExtent([1, Infinity])
  .translateExtent([0, 0], [width, height])
  .extent([[0, 0], [width, height]])
  .on("zoom", zoomed);

var xLine = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + height + ")")
  .attr("class", "xAxis")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "middle");
var yLine = svg.append("g")
  .attr("transform", "translate(" + margin.left + ", 0)")
  .attr("class", "yAxis")
  .call(yAxis)
  .selectAll("text")
  .attr("class", "cateName")
  .style("text-anchor", "end");

svg.call(zoom);

function zoomed() {
  xLine.call(xAxis.scale(d3.event.transform.rescaleX(x)));
};

这个想法很简单，当你水平平移时，X轴会调整位置。但是，单击SVG时，x轴上的所有标签都将消失。 我试图调查一下，但我的

x

似乎是

NaN

为什么会这样？我错过什么了吗？ JSFIDLE在这里：

---

谢谢你的帮助

看来我犯了一个很简单的错误：

zoom.translateExtent（）

应该在1个参数中，而不是2个参数中。 因此，解决方案应该是：

zoom.translateExtent（[[0,0]，[width，height]]）

---

答案如下：

看起来我犯了一个非常简单的错误：

zoom.translateExtent（）

应该在1个参数中，而不是2个参数中。 因此，解决方案应该是：

zoom.translateExtent（[[0,0]，[width，height]]）

答案如下：