Javascript D3仅加载一个数据单元
我在8888端口上使用python运行了一个http.server 我正在尝试将tsv文件加载到日/小时热图中： [链接] 请注意，data.tsv文件和代码 下面的输出是我在浏览到相应文件时在Chrome浏览器中看到的。它没有加载全部数据 （这是我第一次使用D3）Javascript D3仅加载一个数据单元,javascript,python,d3.js,Javascript,Python,D3.js,我在8888端口上使用python运行了一个http.server 我正在尝试将tsv文件加载到日/小时热图中： [链接] 请注意，data.tsv文件和代码 下面的输出是我在浏览到相应文件时在Chrome浏览器中看到的。它没有加载全部数据 （这是我第一次使用D3） 矩形边界{ 冲程：#e6； 笔画宽度：2px； } text.mono{ 字号：9pt； 字体系列：Consolas、courier； 填充：#aaa； } text.axis-workweek{ 填写：#000； } text
矩形边界{
冲程：#e6；
笔画宽度：2px；
}
text.mono{
字号：9pt；
字体系列：Consolas、courier；
填充：#aaa；
}
text.axis-workweek{
填写：#000；
}
text.axis-worktime{
填写：#000；
}
var margin={top:50，right:0，bottom:100，left:30}，
宽度=960-margin.left-margin.right，
高度=430-margin.top-margin.bottom，
网格尺寸=数学地板（宽度/24），
LegendlementWidth=gridSize*2，
桶=9，
颜色=[“ffffd9”、“edf8b1”、“c7e9b4”、“7fcdbb”、“41b6c4”、“1d91c0”、“225ea8”、“253494”、“081d58”]、//或者color brewer.YlGnBu[9]
天数=[“Mo”、“Tu”、“We”、“Th”、“Fr”、“Sa”、“Su”]，
时间=[“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.tsv（“data.csv”，
职能（d）{
返回{
日：+d.day，
小时：+d.hour，
值：+d.value
};
},
函数（错误、数据）{
var colorScale=d3.scale.quantile（）
.domain（[0，bucket-1，d3.max（数据，函数（d）{返回d.value；}）]）
.范围（颜色）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var dayLabels=svg.selectAll（“.dayLabel”）
.数据（天）
.enter（）.append（“文本”）
.text（函数（d）{return d；}）
.attr（“x”，0）
.attr（“y”，函数（d，i）{return i*gridSize；}）
.style（“文本锚定”、“结束”）
.attr（“转换”、“平移（-6“+gridSize/1.5+”））
.attr（“类”，函数（d，i）{return（（i>=0&&i=7&&i代码看起来很正确，因为它与示例中显示的方式完全相同，所以问题可能出在数据文件上。
仅在第一个网格中获取数据意味着没有正确渲染x和y值。
.attr（“x”，函数（d）{return（d.hour-1）*gridSize；}）
.attr（“y”，函数（d）{return（d.day-1）*gridSize；}）
日期和小时的名称写得正确吗？（即使是大写字母也会产生问题，比如日期和小时，而不是日期和小时）
希望这能有所帮助。看到您的一些代码会很好。我可以看到两个可能的问题：（1）您从未检查错误
值。如果您遇到文件读取错误，那么数据将是一个未定义的元素（尽管您不应该得到任何方块）。（2）您的文件名是“.csv”但是您使用的是tsv
方法。如果数据以逗号分隔，则数据的所有属性都将连接在一起（d[“day，hour，value”]=“1,10,14”
）。您可以再试一次吗？第一：检查错误
是否未定义，并且您在控制台上没有收到任何错误；第二：打印数据
的值，以便您知道它在读取什么。
<!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: #aaa;
}
text.axis-workweek {
fill: #000;
}
text.axis-worktime {
fill: #000;
}
</style>
<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: 100, left: 30 },
width = 960 - margin.left - margin.right,
height = 430 - 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"],
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.tsv("data.csv",
function(d) {
return {
day: +d.day,
hour: +d.hour,
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 <= 4) ? "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 >= 7 && i <= 16) ? "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.day - 1) * gridSize; })
.attr("rx", 4)
.attr("ry", 4)
.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>