角度2のD3 V4グラフのドラッグ＆ズーム

Question

d3 4.2.2と一緒にAngular2のグラフを作成しています。私は複数の系列の折れ線グラフを作成しましたが、今はもっと多くの機能を追加しようとしています。私のデータソースは90日間のデータを持ち、チャートはすべてのデータを表示しますが、見栄えが良くありません。そこで、ズームとパンの機能をチャートに追加することになりました。しかし、結果は私が本当に期待したものではありません。 X軸ラベルが重なっています。軸名は半分を表示しています。ここで私が試したことがあります。

データソース

var data = [{ 
    "date": "2016-10-01", 
    "sales": 110, 
    "searches": 67 
}, 
.... 
{ 
    "date": "2016-12-31", 
    "sales": 110, 
    "searches": 45 
}]; 

&パン

var svg = d3.select(this.htmlElement).append("svg") 
    .attr("class", "bar-graph") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .call(d3.zoom().scaleExtent([1, 10]).on("zoom", function() { 
     svg.attr("transform", d3.event.transform) 
    })) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

は、追加のズームを追加するには私のチャートは以下のように見える終わりに

// Add the X Axis 
svg.append("g") 
    .style("font", "14px open-sans") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x).ticks(d3.timeDay.every(1)).tickFormat(d3.timeFormat("%d/%m"))); 


// Add the Y Axis 
svg.append("g") 
    .style("font", "14px open-sans") 
    //.tickSize(-height) 
    .call(d3.axisLeft(y).ticks(5)); 

を刻みます。

今のチャートは、グラフ全体として&ドラッグをズームすることができます。表示するx軸のティック数を制限する方法はありますか？ユーザーはドラッグしてグラフの残りの部分を見ることができますか？

誰もが私のチャートは良いが

を見て作るために私を助けるためにとても親切にすることができれば、私は多くの義務を負うことになる

はあなたがズームに変換、ズーム付きのx軸とy軸を再計算する必要が

Answer 1

ありがとう コールバック関数。

function zoomed() { 
    var t = d3.event.transform, 
     xt = t.rescaleX(x); 
     yt = t.rescaleY(y); 
    svg.attr("transform", t) 
    var line = d3.line() 
     .x(function(d) { 
      return xt(d.date); 
     }) 
     .y(function(d) { 
      return yt(d.scales); 
     }); 
    g.select("path").attr("d", line); 
    svg.select(".axis--x").call(xAxis.scale(xt)); 
}