D3 v4 xAchse zoomen zurück x als NaN macht rescale (x) kann nicht abgeschlossen werden

Question

Ich versuche eine Zoom-Option mit x-Achse als Datumsformat zu erreichen. Hier ist der Code-Beispiel:

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))); 
}; 

Die Idee ist sehr einfach, wenn Sie horizontal schwenken, die xAchse die Position anpassen. Wenn Sie jedoch auf SVG klicken, werden alle Beschriftungen auf der x-Achse ausgeblendet. Ich habe versucht, es zu suchen, aber es scheint, dass meine x in source codeNaN ist.

Warum passiert das? Fehle ich etwas? Die JSFiddle ist hier: https://jsfiddle.net/amyytnt0/1/

Vielen Dank für Ihre Hilfe!

Answer 1

Sieht aus wie ich einen sehr einfachen Fehler gemacht: Die zoom.translateExtent() in 1 Argumente sein sollte, nicht 2. Also das Update sollte sein: zoom.translateExtent([[0, 0], [width, height]])

Antwort hier: https://github.com/d3/d3-zoom/issues/73#issuecomment-263326469