时间戳

首页 > 解决方案 > 具有初始缩放的 d3.js 区域图

javascript - 具有初始缩放的 d3.js 区域图

问题描述

我正在尝试使用具有初始缩放的 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));
  }

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

标签： javascriptd3.js

解决方案

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

缩放应用于两个元素：

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 查看

推荐阅读