Question

我创建了一个实时d3折线图。您可以在JSFiddle中看到它。

有两个问题：

1 - 当缩放和缩小两者都工作正常时，它不会持续，因为图表的realTime更新会将聊天设置回非缩放状态。

如何制作图表，以便图表在更新后保持其放大或缩小状态？

以下是无法刷新的缩放和缩小代码。对于整个示例代码，您可以转到JSFiddle。

我对此代码的期望是，我应该能够保存视口位置，以便在刷新时我可以使用该位置并将导航栏移动到旧位置。

this.zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [this.width, this.height]])
.extent([[0, 0], [this.width, this.height]])
.on("zoom", ()=> {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") {
    return; // ignore zoom-by-brush
  }
  let t = d3.event.transform;;
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "wheel") {
   thisObj.zoomTransform = d3.event.transform;
   }

 if(thisObj.isToUpdateChart && (typeof thisObj.zoomTransform != 'undefined'))
 {
   //t = this.zoomTransform;
   thisObj.isToUpdateChart = false;
   //this.zoomTransform = undefined;
 }
 else
    thisObj.isToUpdateChart = false;
  thisObj.mainXScale.domain(t .rescaleX(thisObj.navXScale).domain());
  let count = 0;
  thisObj.mainLinePath.forEach(linePath => {
    linePath
    // .attr('transform', null)
    // .transition()
    // .duration(this.duration)
    // .ease(this.transition)
    .attr("d", thisObj.mainChartLine[count]);
    count++;
  });
  thisObj.mainXAxisGroup
  // .transition()
  // .duration(this.duration)
  // .ease(this.transition)
  .call( thisObj.mainXAxis);
  thisObj.navGroup.select(".x.brush")
  .call(thisObj.navXBrush.move, thisObj.mainXScale.range().map(t.invertX, t));
});

2 - 我希望能够使用下面的导航图导航主图表。我通过维护navViewportLeft的{{1}}和isToUpdateChart位置（导航栏中所选区域的位置）来实现了目的。但我对这个解决方案不满意。有没有更好的方法呢？

放大和缩小不适用于实时D3折线图

0 个答案: