更新后地图图例颜色不起作用

Question

我已经在这里问过了

那时候我的传说还不错^^

我没有触及我的代码，当我执行它 2 天 agi 时，图例颜色全错了（在某些情况下颜色保持不变，但值不同）

我真的无法解释这种行为

我尝试了很多在互联网上找到的 posts/answers 但无法修复它

有人能帮帮我吗？

这是我的代码：

<script type="text/javascript">
    function myFunction() {
        $("#container").children().remove();

        var s = document.getElementById("combobox");
        var combobox = s.options[s.selectedIndex].text;

        if (combobox=="Ventes Nationales") {
            var fichier  = "http://localhost/project-folder/province.geojson";
        } 

        var h=$("#container").height();
        var w=$("#container").width();


        var svg = d3.select("#container")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);


        var div = d3.select("#container").append("div")   
                    .attr("class", "tooltip")               
                    .style("opacity", 0);

        var color_domain = [100000,250000,500000,1000000,3000000];

                    var extent_color_domain = [0,100000,250000,500000,1000000,3000000];



        var color = d3.scale.threshold()
                        .domain(color_domain)
                        .range(["#ffffcc","#d9f0a3","#addd8e","#78c679","#31a354","#006837"]);

        var legend_labels = ["< 100 000", "100 000 +", "250 000 +", "500 000 +", "1 000 000 +", " > 3 000 000"]; 



        d3.csv("http://localhost/project-folder/marocdislog.csv", function(data) {



            d3.json(fichier, function(json) {


                for (var i = 0; i < data.length ; i++) {

                        //Grab state name
                        var dataState = data[i].nom;

                        //Grab data value, and convert from string to float
                        var dataValue = data[i].population;


                        //Find the corresponding state inside the GeoJSON
                        for (var j = 0; j < json.features.length; j++) {

                            var jsonState = json.features[j].properties.nom;

                            if (dataState == jsonState) {

                                //Copy the data value into the JSON
                                json.features[j].properties.CA = dataValue;

                                //Stop looking through the JSON
                                break;

                                                        }
                                                                        }       
                                                        }

            var projection = d3.geo.mercator().scale(1).translate([0, 0]);
            var path = d3.geo.path().projection(projection);

            var b = path.bounds( json ),
                            s = .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h),
                            t = [(w - s * (b[1][0] + b[0][0])) / 2, (w - s * (b[1][1] + b[0][1])) / 2];

                            projection
                                .scale(s)
                                .translate(t);
            svg.selectAll("path")
                .data(json.features)
                .enter()
                .append('path')
                .attr('d', path)
                .attr("stroke","white")
                .attr("stroke-width",1)
                .style("fill", function(d) {
                                            //Get data value
                                            var value = d.properties.CA;

                                            if (value) {
                                                //If value exists…
                                                return color(value);
                                            } else {
                                                //If value is undefined…
                                                return "#ccc";
                                            }
                                       })                   

                .on("mouseover", function(d) {

                    div.transition()
                        .duration(50)
                        .style("opacity", .9);

                    div.html(d.properties.nom+"<br/>"+d.properties.CA)
                        .style("left", (d3.event.pageX + 30) + "px")
                        .style("top", (d3.event.pageY - 30) + "px")})

                .on("mouseout", function() {

                    div.transition()
                        .duration(50)
                        .style("opacity", 0);

                    div.html("")
                        .style("left", "0px")
                        .style("top", "0px");})


                    ;


            var ls_w = 20, ls_h = 20;

                var legend = svg.selectAll("g.legend")
                                .data(extent_color_domain)
                                .enter().append("g")
                                .attr("class", "legend")
                                .attr( 'transform', function(d,i) {
                                    return 'translate( ' + (w - 200) + ' ' + (h - (i*ls_h) - ls_h) + ' )' 
                                  });

                legend.append("rect")
                      .attr("x", 20)
                      .attr("y", -20 )
                      .attr("width", ls_w)
                      .attr("height", ls_h)
                      .style("fill", function(d, i) { return color(d); })
                      .style("opacity", 0.8);

                legend.append("text")
                      .attr("x", 50)
                      .attr("y", -4 )
                      .text(function(d, i){ return legend_labels[i]; }); 

                var nom = svg.append("text")
                      .attr("class", "legendTitle")
                      .attr("text-anchor","middle")
                      .attr( 'transform','translate( ' + (w/2) + ' ' + (h-5) + ' )')
                      .text("Mon titre");
        }); 
        });

        }



</script>

这里是 plunker : https://plnkr.co/edit/veQCOBFdBZx1yIf2kM6C

非常感谢您的帮助

Answer 1

真丢人。不得不更新 chrome。工作正常

更新后地图图例颜色不起作用

Map legend color not working since update

javascript

d3.js

legend

legend-properties