使用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); 

然后我想补充的2种互动：

省

时间滑块的

1. 选择

一起，选择复选框，将时间滑块确定哪些地区在任何给定时间可见。 例如，如果选择省A并且年份是1984，则仅显示该区域。如果现在拖动了时间滑块，现在将为省A显示相应的年份。如果选中了另一个省，则会覆盖区域，并在时间滑块移动时重绘这两个区域。

Protovis问题：

1. 我如何格式化这个应用程序的数据（省，今年，X，Y）？
2. 如何实现复选框与区域的绑定？
3. 如何实现时间滑块？在Protovis中，或者像一个带有监听器的外部组件，可以触发图形的重新渲染？

Answer 1

格式化数据：第一步是把它变成JSON，使用一些外部工具（我真的很喜欢Google Refine对于这一点，虽然这是一个相当大的工具，如果这是你需要它 - 尝试Mr. Data Converter了快速和肮脏的选择）。这些工具很可能会给你的数据作为JSON对象，像这样：

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

一旦你有可以作为JSON数据，你要进入它的形状为你的VI。你会想要传递每个pv.Area一个值的数组 - 从你的描述中看起来你想要[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）。这应该非常简单 - 请参阅here，了解使用jQuery UI制作时间滑块的Protovis示例，非常类似于您的想法。

Answer 2

我认为你正试图使这对图表：

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