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

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

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

我该如何解决这个问题？

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

非常感谢您的帮助！

来源

2017-02-21 V. Cruz

'spending.html'中的行号56是什么。我认为这是错误所在。另外，“我如何为选择框获取唯一值？我不想要12个名字。”意思？你在右下角选择一个人的名字？你是否在问如何用'.tsv'文件中的每个人的名字填充下拉菜单？ –

@VivekPradhan，行号56是“d3.time.format（”％b“）。parse（d.mnum）;”对，就是这样。我想知道如何从'.tsv'文件中每人只输入一个条目来填充下拉菜单。另外，是否可以通过下拉选择生成热图？ –

所以这里有两个问题对吗？一个是从月份数中得到缩写月份，比如'Jan'等，另一个是从'.tsv'右边提取唯一的人名？ –

通过您在问题中编写的循环，您可以轻松地获取数组中的唯一人名。喜欢的东西：

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或第0指数当d.mnum为1，因此返回“1月”为d.mnum为1，依此类推。

来源

2017-02-21 05:45:18

我想知道为什么有人低估了这一点;这是一个很好的答案。 – Mark

我无法将此转换为热图。我能得到一些帮助吗？我没有降低答案。 –

@ V.Cruz，你没有提到你产生heatMap的具体问题。您提出的两个问题在我的回复中得到解答。解析错误和唯一人名现在应该解决。你需要详细说明你现在在生成HeatMap时面临的问题还是更好，请问一个新问题。 –

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

回答

相关问题