Homework1
一、错误描述
可视语言与信息可视化实验中的heat map实验时，绘制的图像总有三条是黑色
二、产生原因
这三条数据的名称以数字开头
三、如何发现
在仔细查看源码，去网上查询有同样错误的人的求问后，明白这里有个error。
四、如何改正
在源数据和代码中相应位置加上P开头，避免数字开头。
五、源码
<!DOCTYPE html>
//省略……
<body>
<div id="chart"></div> <!-- div定义一个大块 -->
<div id="newdiv"></div> <!-- div定义一个大块 -->
<script type="text/javascript">
var array_data = [];
// 一句话定义了众多变量， 定义了块儿的位置、宽高、小格子的边长等等与布局有关的变量
var margin = { top: 50, right: 0, bottom: 100, left: 150 },
width = 960 - margin.left - margin.right, // 所有格子区域的宽度，即Heatmap的宽度
height = 1830 - margin.top - margin.bottom,
gridSize = Math.floor(width / 24), // 求地板，即去掉小数部分，width分成24份
legendElementWidth = gridSize * 2, // 底下长条的长度，是格子边长的两倍
buckets = 9, // 一共9种颜色级别
colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],
tests = ["G","MIN","PTS","FGM","FGA","FGP","FTM","FTA","FTP","3PM","3PA","3PP","ORB","DRB","TRB","AST","STL","BLK","TO","PF"];
// 函数，读取 CSV 文件
d3.csv("ball_data.csv",
function(error, data) {
/*if(error){
console.log(error);
}
console.log(csvdata);*/
// colorScale：颜色级别
var colorScale = d3.scale.quantile() // 按分位数取值，可使每个区域内元素个数相等
.domain([0, buckets - 1, d3.max(data, function (d) { return d.G; })]) // 定义域
// domain([0, n, 数据的最大值]);
.range(colors); // 值域：是颜色数组，函数的返回值是代表某种颜色的字符串
// 设置chart，svg
var svg = d3.select("#chart").append("svg") // 选择“chart”（就是div），加入一个svg，设置属性跟div一样大
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g") // 在svg内加入一个g（group组），并设置元素g的显示位置
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// 编辑姓名行
var dayLabels = svg.selectAll(".nameLabel")
.data(data)
.enter() // 为data中每一项创建一个".dayLabel"
.append("text") // 为days中每一项创建一的".dayLabel"添加文本，下面全是设置文本的属性
.text(function (d, i) { return data[i].name; })
.attr("x", 0)
.attr("y", function (d, i) { return i * gridSize; })
.style("text-anchor", "end")
.attr("transform", "translate(-6," + gridSize / 1.5 + ")")
.attr("class", function (d, i)
{ return ((i >= 0 && i <= 4) ? "nameLabel mono axis axis-workweek" : "nameLabel mono axis"); }
);
// 编辑测试项行
var timeLabels = svg.selectAll(".testLabel")
.data(tests)
.enter().append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return i * gridSize; })
.attr("y", 0)
.style("text-anchor", "middle")
.attr("transform", "translate(" + gridSize / 2 + ", -6)")
.attr("class", function(d, i) {
return ((i >= 7 && i <= 16) ? "testLabel mono axis axis-worktime" : "testLabel mono axis"); }
);
// 画出格子，暂不涂色，color[0]
for (var i = 0; i < 50; i++){
array_data[i*20] = data[i].G;
array_data[i*20+1] = data[i].MIN;
array_data[i*20+2] = data[i].PTS;
array_data[i*20+3] = data[i].FGM;
array_data[i*20+4] = data[i].FGA;
array_data[i*20+5] = data[i].FGP;
array_data[i*20+6] = data[i].FTM;
array_data[i*20+7] = data[i].FTA;
array_data[i*20+8] = data[i].FTP;
array_data[i*20+9] = data[i].P3PM;
array_data[i*20+10] = data[i].P3PA;
array_data[i*20+11] = data[i].P3PP;
array_data[i*20+12] = data[i].ORB;
array_data[i*20+13] = data[i].DRB;
array_data[i*20+14] = data[i].TRB;
array_data[i*20+15] = data[i].AST;
array_data[i*20+16] = data[i].STL;
array_data[i*20+17] = data[i].BLK;
array_data[i*20+18] = data[i].TO;
array_data[i*20+19] = data[i].PF;
}
var heatMap = svg.selectAll(".score")
.data(array_data)
.enter() // 为data中每一项创建一个".hour"
.append("rect")
.attr("x", function(d, i){ return (i % 20)*gridSize;})
.attr("y", function(d, i){ return parseInt(i / 20)*gridSize;})
.attr("rx", 6)
.attr("ry", 6)
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", "#FFFFFF");
// duration(1000) 在1000ns也就是1s内将格子图上色
heatMap.transition().duration(1000)
.style("fill", function(d) { return colorScale(d); });
// 鼠标停留显示value
heatMap.append("title").text(function(d) { return d.G; });
// legend 是一个有7个组的什么东西，，，
var legend = svg.selectAll(".legend")
.data([0].concat(colorScale.quantiles()), function(d) { return d; }) // 由data获得的元素个数为7
.enter().append("g")
.attr("class", "legend");
legend.append("rect")
.attr("x", function(d, i) { return legendElementWidth * i; })
.attr("y", height)
.attr("width", legendElementWidth)
.attr("height", gridSize / 2)
.style("fill", function(d, i) { return colors[i]; });
legend.append("text")
.attr("class", "mono")
.text(function(d) { return ">= "+Math.round(d); })
.attr("x", function(d, i) { return legendElementWidth * i; })
.attr("y", height + gridSize);
});
</script>
</body>
</html>
