Question

这是我如何设置地图的颜色范围

    var color = d3.scaleThreshold()
    .domain([1,1000])
    .range(d3.schemeCategory20b);

我在域中设置的数据中的值不超过1000，所以我在设置此范围时给出的域范围从1到1000它没有按预期显示颜色，就像我想用域之类的颜色显示我的地图范围[1,50] - ＆gt;绿色＆amp; [51,250] - ＆gt;黄色，[251,700] - ＆gt;深绿色＆amp; [701,1000] - ＆gt;黄色我怎样才能做到这一点？有什么想法吗？

Answer 1

在阈值范围内，如果范围具有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>

d3.js根据域范围不显示地图的颜色范围

1 个答案: