javascript - d3设置色标的等级数

我做了这样的色标：

var clr = d3.scale.linear()
   .range(["white',"black"])
   .domain(...)

var legend = svg.selectAll(".legend")
    .data(clr.ticks(9))
    .enter()
    .append("g")

有没有办法指定色标的数量？我正在使用不同的数据集更新图表，并且当前每次我更新比例更改的次数。

最佳答案

有几种方法可以创建具有给定步骤数的颜色阵列。保持线性比例，这是其中之一：

var clr = d3.scale.linear()
  .range(["white", "black"])
  .domain([0, 8]);

var colourArray = d3.range(9).map(function(d) {
  return clr(d)
});;

console.log(colourArray)

<script src="https://d3js.org/d3.v3.min.js"></script>

在这里，我们创建9种颜色，从white到black。基本思想是设置一个域（[0, 8]），并使用从该域（d3.range(9)）的开始到末尾有9个数字的数组，在数组中填充map。

这是展示颜色的演示：

var clr = d3.scale.linear()
  .range(["white", "black"])
  .domain([0, 8]);

var colourArray = d3.range(9).map(function(d) {
  return clr(d)
});

var divs = d3.select("body").selectAll(null)
  .data(d3.range(9))
  .enter()
  .append("div")
  .style("background-color", function(d, i) {
    return colourArray[i]
  })

div {
  min-width: 30px;
  min-height: 30px;
  display: inline-block;
  margin: 4px;
  border: 1px solid black;
}

<script src="https://d3js.org/d3.v3.min.js"></script>

关于javascript - d3设置色标的等级数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46762156/