在 D3 中创建热图(二维直方图)

Question

我正在自学D3。我的目标是创建一个下拉菜单，一个人可以在其中选择一个名字，返回的是带有该人消费习惯的热图(请告诉我我是否在这里对 D3 过于雄心勃勃，老实说我不知道)。我创建了一个虚拟的TSV(spending.tsv)文件，格式为(名称，月份数(mnum)，年份，花费)。

name    mnum    year    spent
Jane    1   2010    10
Jane    2   2010    20
Jane    3   2010    30.54
Jane    4   2010    67.84
Jane    5   2010    100
Jane    6   2010    110.87
Jane    7   2010    58
Jane    8   2010    70
Jane    9   2010    68.91
Jane    10  2010    123.56
Jane    11  2010    75.82
Jane    12  2010    12.45
Derek   1   2011    5.45
Derek   2   2011    10
Derek   3   2011    15
Derek   4   2011    30
Derek   5   2011    25
Derek   6   2011    11
Derek   7   2011    42
Derek   8   2011    48
Derek   9   2011    31
Derek   10  2011    23.89
Derek   11  2011    45.67
Derek   12  2011    38.89
Frank   1   2012    1
Frank   2   2012    2
Frank   3   2012    3
Frank   4   2012    4
Frank   5   2012    5
Frank   6   2012    6
Frank   7   2012    7
Frank   8   2012    8
Frank   9   2012    9
Frank   10  2012    10
Frank   11  2012    11
Frank   12  2012    12

是否可以仅从一个数字(1-12)中获得缩写月份。我试过做

d3.tsv("spending.tsv", function(error, data) {
if (error) console.log(error)
data.forEach(function(d) {
d3.time.format("%b").parse(d.mnum);
});
});

但我得到了一个

Uncaught TypeError: Cannot read property 'length' of undefined
at e (http://d3js.org/d3.v3.min.js:1:15256)
at Function.t.parse (http://d3js.org/d3.v3.min.js:1:14782)
at http://localhost:8080/spending.html:56:26

我该如何解决这个问题？

如何获取选择框的唯一值？我不想要十二个名字。

非常感谢您的帮助！

Answer 1

您可以通过在问题中编写的循环轻松获取数组中的唯一人名。像这样：

var unique_names_arr = []; //Will contain unique names
d3.tsv("spending.tsv", function(error, data) {
if (error) console.log(error)
data.forEach(function(d) {
if (unique_names_arr.indexOf(data.name) === -1){
//That means the name doesn't exist and we can push it into the array
unique_names_arr.push(data.name);      
};
});
});

上面的代码片段使用indexOf方法来检查数组中是否存在元素。

现在，要从数字中获取缩写月份名称，您只需将所有缩写月份名称存储在一个数组中：

var abbrev_months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
console.log(abbrev_months[d.mnum - 1]); //inside the loop

基本上，当d.mnum为 1 时，Willabbrev_months[d.mnum - 1]将获取第 1 个或第 0 个索引，因此它返回"Jan"，d.mnum为 1，依此类推。