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

Posted 2023-02-16

【中文标题】地图图例颜色自更新后不起作用

【英文标题】：Map legend color not working since update

【发布时间】：2018-03-31 17:37:59

【问题描述】：

我已经在这里问过这个Map + Legend on same svg

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

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

我真的无法解释这种行为

我尝试了很多在互联网上找到的帖子/答案，但无法修复

有人可以帮帮我吗？

这是我的代码：

<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

非常感谢您的帮助

【问题讨论】：

似乎有一些问题 - 即尝试通过 http 而不是 https 访问 d3 文件。尝试访问本地电脑上的 csv。

你认为这是原因吗？我一直这样做，以前从未发生过......它在你身边正常工作吗？

有什么帮助吗？

抱歉，当我试图查看您的代码时，这些是我在控制台中遇到的错误。

【参考方案1】：

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