使用 Protovis 的交互式面积图答案

【问题标题】：Interactive area chart using Protovis使用 Protovis 的交互式面积图
【发布时间】：2011-06-13 23:45:12
【问题描述】：

对于 Protovis 新手来说，这是一个相当令人生畏的项目，但也许你可以帮我把它分成易于消化的部分？

我想要构建的是“交互式面积图”，如下所示：

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

省 10 年 100 1000 10000 1970 年 2 4 6 3 1971 年 3 6 8 5 B 1970 6 9 12 6 乙 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种交互方式：

省份选择
时间滑块

选择复选框和时间滑块共同决定了在任何给定时间哪些区域可见。例如，如果选择省 A 且年份为 1984，则仅显示该区域。如果现在拖动时间滑块，则现在会显示省 A 的相应年份。如果选中另一个省，则区域会重叠，并且当时间滑块移动时会重新绘制两个区域。

Protovis 问题：

如何设置此应用程序的数据格式（省、年、x、y）？
如何实现复选框与区域的绑定？
如何实现时间滑块？在 Protovis 中还是像带有触发重新渲染图形的侦听器的外部组件一样？

【问题讨论】：

标签： javascript json visualization protovis

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

格式化数据：第一步是使用一些外部工具将其转换为 JSON（我真的很喜欢 Google Refine，虽然它是一个非常大的工具，如果这就是你所需要的 - 试试 Mr. Data Converter一个快速而肮脏的选择）。这些工具可能会将数据作为 JSON 对象提供给您，如下所示：

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

一旦您获得了 JSON 格式的数据，您就会希望将其用于您的可视化。您将要向每个 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 示例，该示例与您的想法非常相似。

【讨论】：

真正的好答案！谢谢。