d3.js色彩范围的地图不显示为每个域范围
问题描述:
这怎么我设置的颜色范围为地图d3.js色彩范围的地图不显示为每个域范围
var color = d3.scaleThreshold()
.domain([1,1000])
.range(d3.schemeCategory20b);
我的数据值,我在域已设置不超过1000,所以我已设定范围从1到1000设置此范围它不显示颜色如预期,就像我想显示我的地图,像域名 范围[1,50] - >绿色& [51,250] - >黄色,[251,700 ] - >深绿色& [701,1000] - >黄色 我该怎么做?有任何想法吗?
答
在阈值范围内,如果范围具有N个值,则该域必须具有N-1个值。
因此,只要告诉正是你已经告诉我们,问题的规模:
var color = d3.scaleThreshold()
.domain([50, 250, 700])
.range(["green", "yellow", "darkgreen", "yellow"]);
这是一个基本的演示,将鼠标悬停在每个矩形看到它的价值:
var body = d3.select("body");
var color = d3.scaleThreshold()
.domain([50, 250, 700])
.range(["green", "yellow", "darkgreen", "yellow"]);
body.selectAll(null)
.data(d3.range(51).map(d => d * 20))
.enter()
.append("div")
.style("background-color", d => color(d))
.on("mouseover", function(d) {
console.log("value: " + d + ", color: " + color(d))
})
div {
min-width: 5px;
min-height: 20px;
display: inline-block;
margin: 1px;
border: 1px solid gray;
}
.as-console-wrapper { max-height: 30% !important;}
<script src="https://d3js.org/d3.v4.min.js"></script>
由于您的范围有20种颜色,因此您的域名必须具有** 19个值**。 –
非常感谢你! – Tpk43