带有初始缩放的d3.js面积图 [英] d3.js area graph with initial zoom

问题描述

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

I am trying ti implement a zoom and brush chart with D3.js with an initial zoom. The initial zoom covers only about 10% of the brushable extent - this works correctly. When I zoom on the chart the first time, the zoom does not take into account the initial state.

最初是图:

在第一次缩放后:

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

Here's a plunkr, and the relevant code:

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

为什么缩放事件与初始缩放状态不相关?

Why are zoom events not relative to the initial zoom state?

推荐答案

您的代码可以正常运行如果，则无需缩放图表区域:您可以缩放坐标轴或边距例子.这暗示了正在发生的事情:

Your code works fine if, you don't zoom over the chart plot area: you can zoom on the axes or margins for example. This is a hint as to what is happening:

缩放应用于两个元素:

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

并且:

svg.call(zoom)

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

This means we are keeping track of two zoom states - but you only apply an initial state to one:

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

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

This is why you can zoom in the margins and the chart works as intended, but doesn't work if you zoom over the rect that covers the plot area. Let's just apply the zoom once on one element:

  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文件中的脚本重复.

I've removed the script.js file as it duplicated script in the index.html file.

我在Firefox中使用原始的plunkr遇到了问题，但尚未解决，我使用Chrome浏览器

这篇关于带有初始缩放的d3.js面积图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！