d3等值线地图颜色

Question

我正在尝试使用D3重新创建显示here的地图，但是我无法将数据中的值合并并将其映射到颜色。目前我正在使用scale.quantile，我相信根据应该是8的范围来设置容器的数量，因为我有8种颜色。因此，它会将生育力值分成8个不同的箱子，并将每个箱子映射到每种颜色，但颜色不正确。在我的数据中，瑞典的生育率为1.89，而俄罗斯的生育率为1.7，但它们与我目前的代码在我的地图上的颜色相同，看起来像this。我做错了什么？

        var width5 = 700;
        var height5 = 500;

        buckets = 8,

        colors = ['#ff1a1a','#ff471a','#ffd633','#ffff1a','#ccff33',' #66ff66','#00ff00',' #009900'];


        var projection = d3.geo.mercator()
                               .center([ 13, 52 ])
                               .translate([ width5/2.5, height5/1.7 ])
                               .scale([ width5/1.5 ]);

        var path = d3.geo.path()
                         .projection(projection);


        var mapchart = d3.select("#mapchartarea")
                    .append("svg")
                    .attr("width", width5)
                    .attr("height", height5);

        d3.json("data/europe_geo_fertility.json", function(error,collection) {
            if(error) throw error;

            console.log(d3.min(collection.features, function(d) { return d.properties.fertility;}))

            // Sets color for each country according to fertility rate
            var colorScale = d3.scale.quantile()
                .domain([0, buckets -1, d3.max(collection.features, function(d) { return d.properties.fertility;})])
                .range(colors);

            // Draws Map
            mapchart.selectAll("path")
               .data(collection.features)
               .enter()
               .append("path")
               .attr("d", path)
               .attr("stroke", "rgba(8, 81, 156, 0.2)")
               .attr("fill", "rgba(8, 81, 156, 0.6)")
               .style("fill", function(d) { return colorScale(d.properties.fertility); });

            // Adds name of each country
            mapchart.selectAll("text")
            .data(collection.features)
            .enter()
            .append("svg:text")
            .text(function(d){
                return d.properties.name;
            })
            .attr("x", function(d){
                return path.centroid(d)[0];
            })
            .attr("y", function(d){
                return  path.centroid(d)[1];
            })
            .attr("text-anchor","middle")
            .attr('font-size','6pt');                  

        });