小编Emp*_*ray的帖子

d3.js时间序列无限滚动

我正在制作一个时间序列折线图,让用户从当前滚动回来.我可以在实时d3.js图表​​上找到教程,我可以找到关于缩放和平移的教程,我可以找到有关使用外部数据源的教程.我无法将所有这些知识融合在一起.

这是我正在寻找的行为:

  • 图表可以及时向后平移(意味着线条,数据点和轴随着鼠标或手指的拖动而移动)
  • 平移应仅影响x轴,不应进行缩放.
  • 当用户平移图表时,会加载更多数据,从而提供无限滚动体验
  • 我打算在至少一个额外的"页面"缓冲数据中为用户滚动进入(已经找到了这部分)
  • 我认为我不需要转换,因为图表的平移已经可以顺利地转换它

这是我到目前为止所做的工作:

  // set up a zoom handler only for panning
  // by limiting the scaleExtent    
  var zoom = d3.behavior.zoom()
  .x(x)
  .y(y)
  .scaleExtent([1, 1])
  .on("zoom", pan);

  var loadedPage = 1; // begin with one page of data loaded
  var nextPage = 2; // next page will be page 2
  var panX = 0;

  function pan() 
  {
     if (d3.event) 
     {
        panX = d3.event ? d3.event.translate[0] : 0;

        // is there a better way to determine …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js

37
推荐指数
2
解决办法
3577
查看次数

标签 统计

d3.js ×1

javascript ×1