ColorBrewer в D3 не работает

Question

Я накладываю карту буклета с библиотекой d3. Отображаются точки, а также карта. Тем не менее, Colorbrewer не работает ... Предполагается окрасить точки на карте в соответствии с их значением, вместо этого они остаются черными. Я мог бы жёстко, что с чем-то вроде if value == 0.1, но это еще не то, что я хочу ...

Вот мой код, структура cities.json можно увидеть here, то ColorBrewer это за one

 ... 

        // add colorbrewer 
        var colorScale = d3.scale.quantize() 
        .domain([extent[0], extent[1]]) 
        .range(colorbrewer.YlGn[n]); 

        // uses d3 data join method 
        // for each data point a "path" is created 
        var feature = g.selectAll("path") 
        .data(collection.features) 
        .enter() 
        .append("path") 
        .style("fill", function(d) { 
         colorScale(d.properties.pop_max); 
        }); 

     ... 

Любые идеи что происходит не так? В моем d.properties.pop_max есть отрицательные значения. Может ли это быть проблема?

Answer 1

Вам не хватает return в функции fill.

... 
... 
.style("fill", function(d) { 
    // add a 'return' here. 
    return colorScale(d.properties.pop_max); 
}); 

Кроме того, вы можете просто написать .domain(extent) непосредственно при инициализации вашего colorScale, поскольку она возвращает d3.extent два ЭЛЕМЕНТ [min, max] массиву

var colorScale = d3.scale.quantize() 
       .domain(extent) // instead of .domain([extent[0], extent[1]]) 
       .range(colorbrewer.YlGn[n]);