Question

我制作了这样的色标：

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

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

有没有办法指定色标的数量？我正在用不同的数据集更新图表，目前每次更新比例变化的数量。

Answer 1

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

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]），并使用从该域的开头到结尾的9个数字的数组（d3.range(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>

d3设置色标的渐变数

1 个答案: