使用Protovis的交互式区域图

Question

对于Protovis的新人来说，这是一个艰巨的项目，但也许您可以帮助我将其分成可消化的块？

我想构建的是“交互式区域图”，如下所示：

首先，这是数据...我有Excel中的省份数据：

Province   Year  10  100  1000  10000 
A          1970  2   4    6     3 
A          1971  3   6    8     5 
B          1970  6   9    12    6 
B          1971  4   8    11    8 
....       ...   .   .    .     .

对于每个省和年份，我希望能够绘制一个区域图表：

vis.add(pv.Area) 
    .data(data.ProvinceA[1970]) 
    .bottom(1) 
    .interpolate("basis") 
    .left(function(d) x(d.x)) 
    .height(function(d) y(d.y)) 
    .fillStyle("rgb(21,173,210)") 
    .anchor("top").add(pv.Line) 
    .lineWidth(3); 

然后，我想添加两种类型的交互性：

1. 选择省
2. 时间滑块

选择复选框和时间滑块确定在任何给定时间可见哪些区域。例如，如果选择了A省A，并且该年份是1984年，则仅显示该区域。如果现在拖动了时间滑块，则现在为省A显示了相应的年份。如果检查了另一个省，则在时间滑块移动时叠加区域并且两个区域都被重新划定。

Protovis问题：

1. 如何为此应用程序格式化数据（省，年，X，Y）？
2. 如何实现复选框与区域的结合？
3. 如何实现时间滑块？在Protovis中或像外部组件一样，带有触发图形重新渲染的侦听器？

Answer 1

格式化数据：第一步是使用一些外部工具将其纳入JSON（我真的很喜欢 Google完善 为此，虽然这是一个非常大的工具，如果您需要的话 - 尝试 - 尝试 数据转换器先生 对于快速而肮脏的选择）。这些工具可能会给您作为JSON对象的数据：这样：

`[{"Province":"A", "Year":"1970", "10":2, "100":4, "1000":6, "10000":3}, ...]`

一旦将数据作为JSON可用，您将需要将其变形为您的VIS。您将要传递每个PV.RAEA一个值数组 - 从您的描述中，您似乎想要[10，100，1000，10000]值。 Protovis有很多操纵数据的工具 - 请参阅 pv. -nest Operator. 。您可能有很多方法可以解决这个问题 - 我可能会这样做：

data = pv.nest(data)
    .key(function(x) {return x.Province})
    .key(function(x) {return x.Year})
    .rollup(function(v) {
        return [v[0]['10'], v[0]['100'], v[0]['1000'], v[0]['10000']];
    });

它为您提供了一个类似的对象：

{ 
    A: {
        1970: [2,4,6,3]
        // ...
    },
    // ...
}

这为您设置接口元素。将一系列支票省和当前年份保留在全球变量中：

var currentProvinces = ['A', 'B', ...];
var currentYear = 1970;

并设置您的区域以引用这些变量：

// a containing panel to help with layout and data
var panel = vis.add(pv.Panel)
    .data(function() currentProvinces); // making this a function allows it to 
                                        // be re-evaluated later
// the area itself
var area = panel.add(pv.Area)
    .data(function(province) data[province][currentYear]);
    // plus more area settings as needed

现在，使用其他一些库 - 我与jQuery一起使用jQuery UI用于滑块 - 创建您的接口元素。每个元素的onchange函数仅需要设置相应的全局变量并调用 vis.render() （假设您的根面板称为 vis）。这应该很简单 - 请参阅 这里 对于使用jQuery UI的Protovis示例，使时间滑块与您的想法非常相似。

Answer 2

我认为您正在尝试制作一对图表：

http://mbostock.github.io/protovis/ex/zoom.html