拖拽使用Angular 2缩放D3 V4图表

Question

我正在使用d3 4.2.2使用Angular2创建图表。我创建了一个多系列折线图，现在我正在尝试添加更多功能。我的数据源有90天的数据，图表显示所有数据，但看起来不太好。所以我试图在图表中添加缩放和平移功能。但结果不是我真正的期望。 X轴标签重叠。轴名称显示一半。这是我试过的。

数据来源

n

添加缩放＆amp;锅

 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 + ")");

最后我的图表如下所示。

现在图表可以缩放＆amp;拖动整个图表。有没有办法限制显示的x轴刻度数，然后用户可以拖动并查看图表的其余部分？

如果有人能够帮助我使我的图表看起来很好看，我将非常感激。

谢谢

Answer 1

您需要在缩放回调功能上使用缩放变换重新计算x和y轴。

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