我想使用自定义十六进制值为D3 Floorplan库中的热图着色。例如＆＃34; heatmap1 =＆＃39;＃000＆＃39;＆＃34;。
https://github.com/dciarletta/d3-floorplan
它声明它使用http://colorbrewer2.org/来表示它的颜色功能。
我希望热图的颜色根据滑动时间线而改变，滑动时间线可以由用户滑动。换句话说，如果它是2016年1月，热图是绿色的，如果它是2016年2月，热图是红色的。
有没有人有如何实现这个目标的例子？
答案 0 :(得分：3)
颜色在d3.floorplan.css中定义为
.RdYlBu .d6-6 {fill:#D73027;background:#D73027;color:#121212}
.RdYlBu .d6-5 {fill:#FC8D59;background:#FC8D59;color:#121212}
.RdYlBu .d6-4 {fill:#FEE090;background:#FEE090;color:#121212}
.RdYlBu .d6-3 {fill:#E0F3F8;background:#E0F3F8;color:#121212}
.RdYlBu .d6-2 {fill:#91BFDB;background:#91BFDB;color:#121212}
.RdYlBu .d6-1 {fill:#4575B4;background:#4575B4;color:#121212}
您只需在自己的css中重新定义此定义，然后在 d3.floorplan.css后加载
运行示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Floor Plan - local coordinate map layers for D3.js</title>
<script data-require="d3@2.10.0" data-semver="2.10.0" src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
<script type="text/javascript" src="http://dciarletta.github.io/d3-floorplan/d3.floorplan.min.js"></script>
<style type="text/css">
@import url('http://dciarletta.github.io/d3-floorplan/d3.floorplan.css');
body {
font-size: 14px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
margin: 50px auto 20px;
width: 720px;
background: #fcfcfc;
line-height: 1.45em;
}
a {
color: #555;
}
a:hover {
color: #000;
}
ul {
margin: 0 20px;
padding: 0;
}
div.code {
border: 1px solid #ccc;
background: #eee;
margin: 10px 0 10px 0;
padding: 10px;
width: 720px;
}
.RdYlBu .d6-6 {fill:red;background:#D73027;color:#121212}
.RdYlBu .d6-5 {fill:green;background:#FC8D59;color:#121212}
.RdYlBu .d6-4 {fill:purple;background:#FEE090;color:#121212}
.RdYlBu .d6-3 {fill:black;background:#E0F3F8;color:#121212}
.RdYlBu .d6-2 {fill:orange;background:#91BFDB;color:#121212}
.RdYlBu .d6-1 {fill:blue;background:#4575B4;color:#121212}
</style>
</head>
<body>
<div id="demo"></div>
<script id="demo-code" type="text/javascript">
var xscale = d3.scale.linear()
.domain([0, 50.0])
.range([0, 720]),
yscale = d3.scale.linear()
.domain([0, 33.79])
.range([0, 487]),
map = d3.floorplan().xScale(xscale).yScale(yscale),
imagelayer = d3.floorplan.imagelayer(),
heatmap = d3.floorplan.heatmap(),
vectorfield = d3.floorplan.vectorfield(),
pathplot = d3.floorplan.pathplot(),
overlays = d3.floorplan.overlays().editMode(true),
mapdata = {};
mapdata[imagelayer.id()] = [{
url: 'http://dciarletta.github.io/d3-floorplan/Sample_Floorplan.jpg',
x: 0,
y: 0,
height: 33.79,
width: 50.0
}];
map.addLayer(imagelayer)
.addLayer(heatmap)
.addLayer(vectorfield)
.addLayer(pathplot)
.addLayer(overlays);
d3.json("http://dciarletta.github.io/d3-floorplan/demo-data.json", function(data) {
mapdata[heatmap.id()] = data.heatmap;
mapdata[overlays.id()] = data.overlays;
mapdata[vectorfield.id()] = data.vectorfield;
mapdata[pathplot.id()] = data.pathplot;
d3.select("#demo").append("svg")
.attr("height", 487).attr("width", 720)
.datum(mapdata).call(map);
});
</script>
</body>
</html>
答案 1 :(得分：0)
好的，明确编辑颜色的方法是通过修改CSS然后执行Mark所说的话：
heatmap.colorMode(['custom']);
heatmap.customThresholds([1, 2, 3]); // choose the values you want to indicate a change of colour
然后更新地图：
mapdata[heatmap.id()] = data.heatmap;
d3.select("#demo")
.datum(mapdata)
.call(map);
然后修改JSON热图元素中的值，这与类名相关，即＆＃34; .d6-6＆＃34;。