wie scrollbare Achse/Schwenk entlang x-Achse in d3js

Question

Ich versuche, ein Timeline-Diagramm mit D3.js in angularjs mit der Option zum Scrollen entlang der x-Achse, um Daten zu sehen.

var rawSvg = element.find("svg")[0]; 

var width = 1000, height = 300; 
var svg = d3.select(rawSvg) 
        .attr("width", width) 
        .attr("height", height); 


// scale for x and y axis 
var xScale = d3.time.scale().domain([new Date(), d3.time.day.offset(new Date(), 5)]).range([0, width]); 
var yScale = d3.scale.linear().domain([28, 0]).range([0, height-75]); 

var zoom = d3.behavior.zoom().x(xScale).y(yScale).scaleExtent([1,1]).on("zoom", zoomed); 

// setting up axis 
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(d3.time.hour, 3).innerTickSize(-(height-75)).outerTickSize(2); 

var yAxis = d3.svg.axis().scale(yScale).orient("left").outerTickSize(2).ticks(0).tickFormat(function(d){ 
      return ''; 
     }).tickPadding(10); 

var g = svg.append("g").attr("transform","translate(20,10)").call(zoom); 

// axis 
g.append("g") 
      .attr("class", "x-axis") 
      .attr("transform","translate(0,"+(height-75)+")") 
      .call(xAxis) 
      .selectAll("text") 
      .style("text-anchor", "center"); 

g.append("g") 
      .attr("class", "y-axis") 
      .call(yAxis); 


function zoomed(){ 
      svg.select('.x.axis').call(xAxis) 
      // svg.select('.y.axis').call(yAxis) 
} 

Aber ich bin nicht in der Lage, dies zu erreichen. Ich bekomme ein Diagramm wie folgt.

Aber was ich will, ist das aktuelle Datum Daten anzuzeigen, und dann sollte der Benutzer entlang der x-Achse zu bewegen Lage sein, die Vergangenheit und Zukunft Daten zu sehen.

Ich versuche, etwas wie this zu erreichen.

EDIT

In dem obigen Code war ich nicht in der Lage, die Zoom-Ereignisse zu erfassen, damit ich ein volles Länge Rechteck jetzt angehängt habe ich die Zoom-Ereignisse erfassen kann.

g.append("rect") 
      .attr("width", width) 
      .attr("height", height-75) 
      .style("fill", "none") 
      .style("pointer-events", "all"); 

Aber immer noch kann ich nicht entlang der X-Achse scrollen.

Answer 1

Es ist witzig, dass manchmal ein Problem zu debuggen eine Weile dauern könnte, aber dann wäre die Lösung Moll Rechtschreibung/Auswahl Fehler. Ich habe ungefähr 40 Minuten damit verbracht, aber es ist nur ein kleiner Auswahlfehler.

Dies ist ein solcher Fall. Hier ist also die Frage:

Sie bewerben sich ein class namens x-axis (man beachte die Strich hier) an die X-Achse aber in Ihrem zoom Funktion, die Sie suchen Achse mit .x.axis das ist nicht richtig. Also hier ist eine Gabel Ihrer Geige, die das Problem löst:

JS FIDDLE

Änderungen am Code:

function zoomed(){ 
    svg.select('.x-axis').call(xAxis) 
} 

Außerdem habe ich die Anzahl der ticks auf der X-Achse geändert alle 6 Stunden zu sein, Überlappungen vermeiden.

Hoffe, das hilft. :)