D3 Ändern der X-Achse beim Zoomen

Question

Ich versuche, meinem Balkendiagramm eine Zoom-Funktion hinzuzufügen. Was ich versuche zu erreichen, ist, wenn ein Benutzer seinen Cursor über einen bestimmten Bereich bewegt, sollten Sie in der Lage sein, in diesen Bereich zu zoomen, und der Wert der x-Achse ändert sich, um die Anzahl der Tage in diesem Monat anzuzeigen. Nach diesem Beispiel http://bl.ocks.org/godds/ec089a2cf3e06a2cd5fc. Ich habe versucht, die gleiche Zoom und Drag-Funktion zu integrieren.

Ich habe Probleme mit der Änderung meiner X-Achsenwerte, da ich nach einer Möglichkeit suche, die X-Achse dynamisch ändern zu lassen, wenn ein bestimmter Bereich ausgewählt wird. Wenn Sie jetzt die Balken zoomen, ändern alle die Position, aber meine x-Achsenwerte bleiben gleich (zeigen Sie immer noch die Anzahl der Monate an, während ich die Anzahl der Tage anzeigen möchte).

My X-Achse Code:

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient('bottom') 
    .ticks(d3.time.month) 
    .tickFormat(d3.time.format('%b %y')) 
    .tickSize(0) 
    .tickPadding(8); 

Mein Pinselwerkzeug:

function bListener(){ 
     x.domain(brush.empty() ? x.domain() : brush.extent()); 
      svg.select(".x axis").call(xAxis); 

      svg.selectAll(".bar").attr("transform", function(d) { 
     console.log(d.date); 
     return "translate(" + x(new Date(d.date)) + ",0)"; 

     }); 
} 

komplette Code finden Sie hier: http://jsfiddle.net/noobiecode/wck4ur9d/32/ wie ich meine Köpfe gehen fühlen würde geschätzt

Jede Hilfe jede Minute explodieren. Ersetzen

Answer 1

svg.select(".x axis").call(xAxis); 

mit

svg.select(".x.axis").call(xAxis); 

außerdem besser, eine Achse und eine Domäne für Pinsel haben alle trennen zusammen

var x2 = d3.time.scale().range([0, width]); 

var brush = d3.svg.brush() 
      .x(x2) 
      .on('brush', bListener); 
x2.domain(x.domain()); 

in Ihrer bListener Funktion

Aktualisiert Geige: http://jsfiddle.net/wck4ur9d/33/

Hinweis: Pinsel und bewegliche Achse nicht gleich wie Zoom ist.