如何使用彩色啤酒秤

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

整张图表都是黑色的--为什么没有使用彩色酿酒机的颜色？

更新

这是一个完整的工作(黑色！)示例：

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 (重点挖掘)：

量化尺度是线性尺度的一个变体，具有离散的而不是连续的范围。输入域仍为连续，并根据输出范围(基数)中的值数将其划分为均匀段。

因此，你必须决定你想要什么。这是一个具有序号的柱塞：https://plnkr.co/edit/qYi0y4A49UIDawZBr5kF?p=preview