javascript - d3.js 带有初始缩放的面积图

Question

我正在尝试使用具有初始缩放功能的 D3.js 实现缩放和画笔图表。初始缩放仅覆盖可刷亮范围的大约 10% - 这可以正常工作。当我第一次放大图表时，缩放不考虑初始状态。

这是最初的图表:

在第一次缩放之后:

这是一个 plunkr , 以及相关代码:

 svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);

    //To set initial zoom level in graph
      var d0 = data[0].date,
      d1 = data[data.length-1].date;
     svg.call(zoom).transition()
    .duration(1500)
    .call(zoom.transform, d3.zoomIdentity
          .scale(width / (x(d1) - x(d0)))
          .translate(-x(d0), 0)); 

  function brushed() {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
    var s = d3.event.selection || x2.range();
    x.domain(s.map(x2.invert, x2));
    focus.select(".area").attr("d", area);
    focus.select(".axis--x").call(xAxis);
    svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
        .scale(width / (s[1] - s[0]))
        .translate(-s[0], 0));
  }

  function zoomed() {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
    var t = d3.event.transform;
    x.domain(t.rescaleX(x2).domain());
    focus.select(".area").attr("d", area);
    focus.select(".axis--x").call(xAxis);
    context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
  }

为什么缩放事件与初始缩放状态无关？

Answer 1

您的代码可以正常工作如果，您不缩放图表绘图区域:例如，您可以缩放轴或边距。这是关于正在发生的事情的提示:

缩放应用于两个元素:

svg.append("rect")
   ...
   .call(zoom);

和:

svg.call(zoom)

这意味着我们正在跟踪两个缩放状态 - 但您只将初始状态应用于一个:

svg.call(zoom).transition()
  .duration(1500)
  .call(zoom.transform, d3.zoomIdentity
      .scale(width / (x(d1) - x(d0)))
      .translate(-x(d0), 0)); 

这就是为什么您可以放大边距并且图表按预期工作，但如果您放大覆盖绘图区域的矩形则不起作用。让我们只对一个元素应用缩放一次:

  var rect = svg.append("rect")
    ...
    .call(zoom);

  rect.transition()
   .duration(1500)
   .call(zoom.transform, d3.zoomIdentity
      .scale(width / (x(d1) - x(d0)))
      .translate(-x(d0), 0));      

这是更新的 plunkr

我删除了 script.js 文件，因为它复制了 index.html 文件中的脚本。

我在 Firefox 中使用您的原始 plunkr 时遇到问题，我没有解决这些问题，我使用 Chrome 查看