d3js中的原始示例稍作修改，以根据过滤条件读取csv文件。没有错误，没有输出。实际示例读取tsv文件。
实际示例在以下链接中给出：
http://bl.ocks.org/tjdecke/5558084
修改后的代码如下：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
rect.bordered {
stroke: #E6E6E6;
stroke-width:2px;
}
text.mono {
font-size: 9pt;
font-family: Consolas, courier;
fill: red;
}
text.axis-workweek {
fill: #000;
}
text.axis-worktime {
fill: #000;
}
</style>
<script src="jquery-1.9.1.min.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var margin = { top: 50, right: 0, bottom: 00, left: 30 },
width = 960 - margin.left - margin.right,
height = 1530 - margin.top - margin.bottom,
gridSize = Math.floor(width / 24),
legendElementWidth = gridSize*2,
buckets = 9,
colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
// days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
days = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"];
d3.csv("ibs_sample (3).csv", function(error, csv){
var data = [];
csv.filter(function(row){
return row['AssetID']=='1001';
})
console.log(csv);
csv.forEach(function(d)
{
// console.log(d);
return
{
var day =d.day,
hour= d.hour,
date =d.date,
value=d.value
};
},
function(error, data) {
//console.log(error);
console.log(data);
var colorScale = d3.scale.quantile()
.domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
.range(colors);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dayLabels = svg.selectAll(".dayLabel")
.data(days)
.enter().append("text")
.text(function (d) { return d; })
.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 <= 31) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });
var timeLabels = svg.selectAll(".timeLabel")
.data(times)
.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 >= 0 && i <= 11) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });
var heatMap = svg.selectAll(".hour")
.data(data)
.enter().append("rect")
.attr("x", function(d) { return (d.hour - 1) * gridSize; })
.attr("y", function(d) { return (d.date - 1) * gridSize; })
// .attr("z", function(d) { return (d.date - 1) * gridSize; })
.attr("rx", 4)
.attr("ry", 5)
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", colors[0]);
heatMap.transition().duration(1000)
.style("fill", function(d) { return colorScale(d.value); });
heatMap.append("title").text(function(d) { return d.value; });
var legend = svg.selectAll(".legend")
.data([0].concat(colorScale.quantiles()), function(d) { return d; })
.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);
});
});
// });
/*function(d){
/* return {
day: +d.day,
hour:+d.hour,
date:+d.date,
value:+d.value
};
},
function(error, data) {
var colorScale = d3.scale.quantile()
.domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
.range(colors);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dayLabels = svg.selectAll(".dayLabel")
.data(days)
.enter().append("text")
.text(function (d) { return d; })
.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 <= 31) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });
var timeLabels = svg.selectAll(".timeLabel")
.data(times)
.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 >= 0 && i <= 11) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });
var heatMap = svg.selectAll(".hour")
.data(data)
.enter().append("rect")
.attr("x", function(d) { return (d.hour - 1) * gridSize; })
.attr("y", function(d) { return (d.date - 1) * gridSize; })
// .attr("z", function(d) { return (d.date - 1) * gridSize; })
.attr("rx", 4)
.attr("ry", 5)
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", colors[0]);
heatMap.transition().duration(1000)
.style("fill", function(d) { return colorScale(d.value); });
heatMap.append("title").text(function(d) { return d.value; });
var legend = svg.selectAll(".legend")
.data([0].concat(colorScale.quantiles()), function(d) { return d; })
.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>
csv格式：
AssetID AssetType Year Month date day hour TempMin TempMax value Pressure
1001 Chiller 2013 Jan 1 2 1 10 23 13 1654
1001 Chiller 2013 Jan 1 2 2 11 24 13 1605
1001 Chiller 2013 Jan 1 2 3 12 24 12 1146
1001 Chiller 2013 Jan 1 2 4 13 24 11 1518
1001 Chiller 2013 Jan 1 2 5 14 24 10 1486
1001 Chiller 2013 Jan 1 2 6 15 24 9 1477
1002 Boiler 2013 Jan 9 3 13 123 149 26 1482
1002 Boiler 2013 Jan 9 3 14 111 153 42 1418
1002 Boiler 2013 Jan 9 3 15 117 171 54 1447
1002 Boiler 2013 Jan 9 3 16 118 156 38 1270
1002 Boiler 2013 Jan 9 3 17 118 178 60 1159
1002 Boiler 2013 Jan 9 3 18 121 159 38 1475
有人可以查看问题是什么吗？是因为使用csv文件而不是tsv或其他原因。？
答案 0 :(得分：0)
您的csv文件可能必须以逗号分隔：
AssetID,AssetType,Year,Month,date,day,hour,TempMin,TempMax,value,Pressure
1001,Chiller,2013,Jan,1,2,1,10,23,13,1654