【问题标题】:D3 graphing selective portions of data setD3 绘制数据集的选择性部分
【发布时间】:2013-03-04 21:52:58
【问题描述】:

我有一个需要绘制的大型时间序列数据集,并且正在尝试使用 D3 来完成它。我计划让我的图表以时间为 x 轴,并允许图表在 x 方向上移动。我想让图表只加载/显示屏幕上当前时间范围内存在的点。

例如,如果我的数据集有时间 1-100,但图表开始时显示的是时间 1-10,则图表应该只绘制点 1-10。然后用户可以向右移动并看到时间 5-15 并且图表应该相应地更新。

谁能向我解释这如何通过 d3 完成?我很难将立即加载并立即绘制图形的整个数据集与数据子集的选择性图形联系起来。

【问题讨论】:

    标签: javascript d3.js graphing


    【解决方案1】:

    我认为您正在寻找selection.filter() 函数。例如,您可以:

    var allNodes = vis.selectAll("Nodes").data(data.nodes); 
    var validNodes = allNodes.filter(function(d){return (d.time>1 && d.time <10)});
    //use normal graph functions on validNodes.  
    

    您也可以直接在节点数组上应用过滤器。

    【讨论】:

    • 感谢您的回复。说得通。我可以动态知道如何设置过滤器功能的界限吗?理想情况下,如果您遵循,我想获得 x 轴的边界。如果他们滚动到 5-15,界限应该是 d.time >=5 && d.time
    • 你应该可以在 API 中找到这个:github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis。否则我不知道。
    • 我很幸运 x.domain() 给了我 x 轴的最小值和最大值。我会将其标记为正确,因为我需要将过滤器与域信息一起使用。
    猜你喜欢
    • 2013-10-12
    • 2017-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-19
    • 2019-05-21
    相关资源
    最近更新 更多