d3.js 地图的颜色范围未按域范围显示

Question

这是我为地图设置颜色范围的方式

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

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

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 地图的颜色范围未按域范围显示

d3.js Color range for map not displaying as per domain range

data-visualization

d3.js

choropleth