javascript – d3热图中的宽度
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – d3热图中的宽度，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6565字，纯文字阅读大概需要10分钟。
内容图文
这是我的示例代码.我的目的是生成一个像这样的矩形的热图
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 / 22),
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"];
datasets = ["data.tsv", "data2.tsv"];
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 data= [
{
"day": 1,
"hour": 1,
"value": 16
},
{
"day": 1,
"hour": 2,
"value": 20
},
{
"day": 1,
"hour": 3,
"value": 0
},
{
"day": 1,
"hour": 4,
"value": 0
},
{
"day": 1,
"hour": 5,
"value": 0
},
{
"day": 1,
"hour": 6,
"value": 2
},
{
"day": 1,
"hour": 7,
"value": 0
},
{
"day": 1,
"hour": 8,
"value": 9
},
{
"day": 1,
"hour": 9,
"value": 25
},
{
"day": 1,
"hour": 10,
"value": 49
},
{
"day": 1,
"hour": 11,
"value": 57
},
{
"day": 1,
"hour": 12,
"value": 61
},
{
"day": 1,
"hour": 13,
"value": 37
},
{
"day": 1,
"hour": 14,
"value": 66
},
{
"day": 1,
"hour": 15,
"value": 70
},
{
"day": 1,
"hour": 16,
"value": 55
},
{
"day": 1,
"hour": 17,
"value": 51
},
{
"day": 1,
"hour": 18,
"value": 55
},
{
"day": 1,
"hour": 19,
"value": 17
},
{
"day": 1,
"hour": 20,
"value": 20
},
{
"day": 1,
"hour": 21,
"value": 9
},
{
"day": 1,
"hour": 22,
"value": 4
},
{
"day": 1,
"hour": 23,
"value": 0
},
{
"day": 1,
"hour": 24,
"value": 12
},
{
"day": 2,
"hour": 1,
"value": 6
},
{
"day": 2,
"hour": 2,
"value": 2
},
{
"day": 2,
"hour": 3,
"value": 0
},
{
"day": 2,
"hour": 4,
"value": 0
},
{
"day": 2,
"hour": 5,
"value": 0
},
{
"day": 2,
"hour": 6,
"value": 2
},
{
"day": 2,
"hour": 7,
"value": 4
},
{
"day": 2,
"hour": 8,
"value": 11
},
{
"day": 2,
"hour": 9,
"value": 28
},
{
"day": 2,
"hour": 10,
"value": 49
},
{
"day": 2,
"hour": 11,
"value": 51
},
{
"day": 2,
"hour": 12,
"value": 47
},
{
"day": 2,
"hour": 13,
"value": 38
},
{
"day": 2,
"hour": 14,
"value": 65
},
{
"day": 2,
"hour": 15,
"value": 60
},
{
"day": 2,
"hour": 16,
"value": 50
},
{
"day": 2,
"hour": 17,
"value": 65
},
{
"day": 2,
"hour": 18,
"value": 50
},
{
"day": 2,
"hour": 19,
"value": 22
},
{
"day": 2,
"hour": 20,
"value": 11
},
{
"day": 2,
"hour": 21,
"value": 12
},
{
"day": 2,
"hour": 22,
"value": 9
},
{
"day": 2,
"hour": 23,
"value": 0
},
{
"day": 2,
"hour": 24,
"value": 13
},
{
"day": 3,
"hour": 1,
"value": 5
},
{
"day": 3,
"hour": 2,
"value": 8
},
{
"day": 3,
"hour": 3,
"value": 8
},
{
"day": 3,
"hour": 4,
"value": 0
},
{
"day": 3,
"hour": 5,
"value": 0
},
{
"day": 3,
"hour": 6,
"value": 2
},
{
"day": 3,
"hour": 7,
"value": 5
},
{
"day": 3,
"hour": 8,
"value": 12
},
{
"day": 3,
"hour": 9,
"value": 34
},
{
"day": 3,
"hour": 10,
"value": 43
},
{
"day": 3,
"hour": 11,
"value": 54
},
{
"day": 3,
"hour": 12,
"value": 44
},
{
"day": 3,
"hour": 13,
"value": 40
},
{
"day": 3,
"hour": 14,
"value": 48
},
{
"day": 3,
"hour": 15,
"value": 54
},
{
"day": 3,
"hour": 16,
"value": 59
},
{
"day": 3,
"hour": 17,
"value": 60
},
{
"day": 3,
"hour": 18,
"value": 51
},
{
"day": 3,
"hour": 19,
"value": 21
},
{
"day": 3,
"hour": 20,
"value": 16
}
]
var colorScale = d3.scale.quantile()
.domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
.range(colors);
var cards = svg.selectAll(".hour")
.data(data, function(d) {return d.day+':'+d.hour;});
cards.append("title");
cards.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+10)
.attr("height", gridSize)
.style("fill", colors[0]);
cards.transition().duration(1000)
.style("fill", function(d) { return colorScale(d.value); });
cards.select("title").text(function(d) { return d.value; });
cards.exit().remove();
var legend = svg.selectAll(".legend")
.data([0].concat(colorScale.quantiles()), function(d) { return d; });
legend.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);
legend.exit().remove();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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="chart"></div>
<div id="dataset-picker"></div>我正在使用here发布的代码.我的目的是增加宽度.所以我在网格中添加了10个网格.但是我的热图仍然是一组正方形.我的目的是使用矩形而不是正方形的热图.
我究竟做错了什么？
解决方法:
您走在正确的道路上,您的网格宽度增加了.如果右键单击任何tile和inspect元素,则可以检查此项.但是发生的事情是你的网格仍然在相同的距离重叠,因此看起来像正方形.您还需要将10px添加到x,以便它们不重叠.
cards.enter().append("rect")
.attr("x", function(d) { return (d.hour - 1) * (gridSize+10); }) //10px added to the gridSize for the x displacement
.attr("y", function(d) { return (d.day - 1) * gridSize; })
.attr("rx", 4)
.attr("ry", 4)
.attr("class", "hour bordered")
.attr("width", gridSize+10)
.attr("height", gridSize)
.style("fill", colors[0]);
希望这可以帮助.
但是,对于未来的注意事项,在上面的代码中,原始gridSize是基于可变宽度计算的.由于矩形大于gridSize,因此您的矩形很可能会从您的svg容器中移出并被切割.要解决此问题,您必须交换角色,即设置gridSize,然后根据gridSize 10计算宽度.如果您需要帮助,请告诉我.
内容总结
以上是互联网集市为您收集整理的javascript – d3热图中的宽度全部内容，希望文章能够帮你解决javascript – d3热图中的宽度所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】