Javascript 在D3中创建热图（2D直方图）

我在自学D3。我的目标是创建一个下拉菜单，在这里一个人可以选择一个名字，返回的是一个关于这个人消费习惯的热图（请告诉我，如果我对D3过于雄心勃勃，我真的不知道）。我创建了一个伪TSV（expensing.TSV）文件，其格式为（名称、月号（mnum）、年份、花费）

是否有可能从一个数字（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

我该如何解决这个问题

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

---

非常感谢你的帮助

通过在问题中编写的循环，您可以轻松获得数组中唯一的人名。比如：

 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);      
     };
   });
 });

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

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

 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]

将在

d.mnum

为1时获取第一个或第0个索引，因此它将

d.mnum

的“Jan”返回为1，依此类推。

在

expensing.html

中的第56行到底是什么。我想这就是错误的根源。还有，“如何为选择框获取唯一值？我不想要12个名称”是什么意思？您正在下拉列表中选择一个人的名字，对吗？你是在问如何从

.tsv

文件中为每个人名只输入一个条目来填充下拉列表吗？@VivekPradhan，第56行是“d3.time.format（“%b”）.parse（d.mnum）”；“是的，完全正确。我想知道如何从

.tsv

文件中每人只填写一个条目来填充下拉列表。另外，是否可以通过下拉选择生成热图？这里有两个问题，对吗？一个是从月号中提取缩写月份，如

Jan

等，另一个是从

中提取唯一的人名。tsv

对吗？三个，包括热图。但是是的，两个是从邮局来的。谢谢。我在把它转换成热图时遇到了麻烦。我可以找人帮忙吗？我没有对答案投反对票。@V.Cruz，你没有提到你在生成热图时面临的具体问题。你提出的两个问题已在我的答复中提到。现在应该解决解析错误和唯一的人名。你需要详细说明在生成热图时你现在面临的问题，或者更好的是，问一个新问题。

 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