d3jsでx軸に沿ってスクロール可能な軸/パンを作成する方法

Question

anglejsでD3.jsを使用してタイムラインチャートを作成しようとしています。データを表示するためにx軸に沿ってスクロールするオプションがあります。

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

しかし、私はそれを達成できません。 私はこのようなグラフを取得しています。

しかし、私が欲しいのは、現在の日付データを表示するようにし、ユーザーが過去と未来のデータを見るために、x軸に沿ってスクロールすることができるはずです。

私はthisのようなものを達成しようとしています。上記のコードで

EDIT

私は今、ズームイベントを捕捉することができる完全長四角形を添付しているので、ズームイベントをキャプチャすることができませんでした。

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

でも、私はx軸に沿ってスクロールできません。

Answer 1

問題のデバッグに時間がかかることがありますが、解決策が小文字のスペル/選択間違いになることは面白いことです。私はこれで約40分を費やしましたが、ちょっとした選択ミスです。

このようなケースの1つです。そこでここでは」問題：

あなたはX軸に（ここではダッシュに気づく）x-axisという名前classを適用しているが、あなたのzoom機能で、あなたは適切ではない.x.axisと軸を探していますが。だから、ここでの問題を解決し、あなたのフィドルのフォークです：

JS FIDDLE

コードの変更：

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

また、私はに6時間ごとであることをX軸上ticksの数を変更しましたが重複を避ける。

これが役に立ちます。 :)