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浏览器

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

1 个答案: