我想用自定義十六進制值爲D3 Floorplan庫中的熱圖顏色。例如「heatmap1 ='＃000'」。D3 Floorplan自定義顏色熱度圖
https://github.com/dciarletta/d3-floorplan
它指出，它使用http://colorbrewer2.org/爲它的顏色功能。
我想根據滑動時間線來改變地圖的顏色，這可以由用戶滑動。換句話說，如果是2016年1月，熱圖是綠色的，如果是2016年2月，熱圖是紅色的。
有沒有人有如何做到這一點的例子？
好編輯的顏色明確是做什麼馬克說通過修改CSS，然後道：
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 heatmaps元素中的值，這與類名稱相關，即「.d6-6」。
的顏色在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="[email protected]" 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>
感謝您的回答，我想要實現的是專門爲熱圖設置顏色，然後根據滾動時間線更改顏色以指示該房間的狀態。我仍然無法理解這個概念，因爲它似乎根據熱圖的數量來設置顏色。我會繼續調查，但任何提示將是最受歡迎的？ –