D3 中的 ColorBrewer 不工作

Question

我用 d3 库覆盖传单地图。显示点以及地图。但是，Colorbrewer 不起作用... 它应该根据它们的值给地图上的点着色，相反，它们保持黑色。我可以用 if value == 0.1 之类的东西对其进行硬编码，但这不是我想要的...

这就是我的代码，可以看到cities.json的结构here, the colorbrewer is this 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 returns 一个二元数组 [min, max] 数组

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

D3 中的 ColorBrewer 不工作

ColorBrewer in D3 does not work

javascript

color-scheme

d3.js

leaflet