javascript - Colorbrewer 没有用 angularjs 和 d3 定义

Question

我正在尝试将渐变颜色应用于旭日图的切片。引用这个question上的回答，我做了一些研究并开始使用 colorbrewer在我的代码中。

注意:我在我的应用中同时引用了 d3 和 colorbrewer

代码:

  var path = g.append("path")
            .attr("d", arc)
            .style("fill", function(d) {
              var colorPicked =  color((d.children ? d : d.parent).name);
              console.log("ColorPicked",colorPicked)
              return d3.scale.quantize().range(colobrewer.OrRd[8]).domain([0, 16000]);
            })
            .on("click", click);

它说 colobrewer 未定义。可能我在这里遗漏了一些东西。如何将渐变应用于切片？

Full Application

Answer 1

你正在返回一个函数:

return d3.scale.quantize().range(colobrewer.OrRd[8]).domain([0, 16000]);

你必须返回一个颜色:

return colorPicked

如果你想改变色阶。在此处更改:

83      var color = d3.scale.category10();

来自 D3 Wiki :

d3.scale.quantize()

Constructs a new quantize scale with the default domain [0,1] and the default range [0,1]. Thus, the default quantize scale is equivalent to the round function for numbers; for example quantize(0.49) returns 0, and quantize(0.51) returns 1.

var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']); 
//q(0.3) === 'a', q(0.4) === 'b', q(0.6) === 'b', q(0.7) ==='c'; 
//q.invertExtent('a') returns [0, 0.3333333333333333]

quantize(x)

Given a value x in the input domain, returns the corresponding value in the output range.

替换你的颜色定义:

var color = d3.scale.category10();

通过

  var color=d3.scale.quantize()
            .range(colorbrewer.OrRd[8])
            .domain([0, 160]);

然后按“值”而不是“名称”分配颜色:

  var path = g.append("path")
    .attr("d", arc)
    .style("fill", function(d) {
      var colorPicked =  color((d.children ? d : d.parent).value);
      return colorPicked
    })
    .on("click", click);