Question

我正在尝试利用此示例进行可视化 https://bl.ocks.org/Bl3f/cdb5ad854b376765fa99

除了这部分以外，其他的工作都差不多

var colorScale = d3.scale.threshold()
        .domain([0.85, 1])
        .range(["#2980B9", "#E67E22", "#27AE60", "#27AE60"]);

我基本上想要基于csv数据中值的最小值和最大值的标准振动器可视化吗？

任何建议，如何修改以上示例。谢谢

Answer 1

如果要使用紫罗兰色–靛蓝–蓝色–绿色–黄色–橙色–红色刻度，可以将d3.interpolateRainbow与顺序刻度一起使用。

然后，像其他连续刻度一样，使用最小值和最大值设置域。

这是一个基本示例。假设此数据：

const data = [12, 43, 76, 54, 87, 91, 17, 42, 36];

我们这样设置比例尺：

const scale = d3.scaleSequential()
    .domain(d3.extent(data))
    .interpolator(d3.interpolateRainbow);

正在运行的演示：

const data = [12, 43, 76, 54, 87, 91, 17, 42, 36];

const scale = d3.scaleSequential()
  .domain(d3.extent(data))
  .interpolator(d3.interpolateRainbow);

d3.select("body").selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .style("background-color", d => scale(d))

div {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

请记住，此比例尺不适用于您链接的特定示例，因为它使用的是旧的D3 v3。

基于最大值和最小值的热图颜色范围

1 个答案: