如何使用colorbrewer量表

Question

我有以下内容:

<script src="http://colorbrewer2.org/export/colorbrewer.js"></script>
...
...
var colorScale = d3.scale.quantize()
        .range(colorbrewer.YlGnBu[9]);
...
...
colorScale.domain([0,layers.length]);
console.log(layers.length)   //<<< this returns 8

整个图表是黑色的 - 为什么没有使用colorbrewer颜色？

---

更新

这是一个完整的工作(黑色!)示例:

https://plnkr.co/edit/JqL0rYIjhZz9gf6102j7?p=preview

Answer 1

一种可能性是更改http为https您的引用,或更改引用本身(我正在与您的src"连接超时"):

<script src="https://d3js.org/colorbrewer.v1.min.js"></script>

除此之外,Brewer比例只是一个数组,并且在任何其他D3比例中使用数组时使用它.

这是一个工作演示.首先,我们设定比例:

var colorScale = d3.scale.quantize()
    .range(colorbrewer.YlGnBu[9])
    .domain([0,9]);

这相当于:

var colorScale = d3.scale.quantize()
    .range(["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb",
            "#41b6c4","#1d91c0","#225ea8","#253494","#081d58"])
    .domain([0,9]);

然后我们用它来为圆圈着色:

.attr("fill", function(d){ return colorScale(d)});

查看演示:

var dataset = d3.range(9);
var colorScale = d3.scale.quantize()
    .range(colorbrewer.YlGnBu[9])
    .domain([0, 9]);

var svg = d3.select("body")
    .append("svg");

var circles = svg.selectAll(".circles")
    .data(dataset)
    .enter()
    .append("circle");

circles.attr("cy", 50)
    .attr("cx", function(d) {
        return 50 + d * 20
    })
    .attr("r", 10)
    .attr("fill", function(d) {
        return colorScale(d)
    });

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

编辑:你的酒吧里的酒吧是黑色的原因.您将其定义colorScale为量化:

var colorScale = d3.scale.quantize()
    .range(colorbrewer.YlGnBu[9])
    .domain([0, 8]);

但是后来,你将它定为一个定性领域!

  colorScale.domain(layers.map(function(layer) {
       return layer.key;
  }));

这根本行不通!根据API(强调我的):

量化量表是线性量表的变体,具有离散而非连续的范围.输入域仍然是连续的,并且基于输出范围(基数)中的值的数量被划分为统一的段.

因此,你必须决定你想要什么.这是一个有序数量的plunkr:https://plnkr.co/edit/qYi0y4A49UIDawZBr5kF？p = preview