Question

我有以下内容：

admin.peers

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

更新

这是一个完整的工作（黑色！）示例：

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

如何使用colorbrewer量表

1 个答案: