在D3

时间:2017-02-21 04:34:36

标签: javascript d3.js

我在教自己D3。我的目标是创建一个下拉菜单,其中一个人可以选择一个名字,返回的是一张带有该人消费习惯的热图(请告诉我,如果我在这里过于雄心勃勃,我真的不知道)。我创建了一个虚拟TSV(spend.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

我该如何解决这个问题?

如何为选择框抓取唯一值?我不想要十二个名字。

非常感谢你的帮助!

1 个答案:

答案 0 :(得分:0)

您可以通过在问题中写入的循环轻松获取数组中的唯一人名。类似的东西:

 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

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