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>