D3 中的 ColorBrewer 不起作用

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

您在fill 函数中缺少return。

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

另外，你可以在初始化colorScale 时直接写.domain(extent)，因为d3.extent 返回一个两个元素[min, max] 数组

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