d3 карта хороплета, показывающая только один цвет - PullRequest
Новая
       46

d3 карта хороплета, показывающая только один цвет

0 голосов
/ 29 июня 2019

Я нуб. Я добавил файл tsv к топойсону Майка Бостока, используя d3.map (). Объединение работает, если я console.log ключи, я вижу соответствующие значения. Я помещаю их в атрибут attr ("fill" ...). Я использую scaleThreshold и указываю 5 элементов в домене и 5 элементов в диапазоне. Однако карта отображает только объекты, использующие первый цвет в диапазоне, независимо от того, насколько близко значение tsv находится к наибольшему или наименьшему числу в домене.

Вот tsv, показывающий только некоторые строки, но все еще отображающий ту же проблему. 

GEOID   displaylabel    rate
01001   "Autauga County, Alabama"   55601
01003   "Baldwin County, Alabama"   218022
01005   "Barbour County, Alabama"   24881
01007   "Bibb County, Alabama"  22400
01009   "Blount County, Alabama"    57840
01011   "Bullock County, Alabama"   10138
01013   "Butler County, Alabama"    19680
01015   "Calhoun County, Alabama"   114277
01017   "Chambers County, Alabama"  33615
01019   "Cherokee County, Alabama"  26032

Вот код: 

<!DOCTYPE html>
   <html>
   <head>
        <meta charset="utf-8">
        <script src="https://d3js.org/topojson.v2.min.js"></script>
        <script src="https://d3js.org/d3.v4.min.js"></script>

        <style>
           .county-borders {
                fill: none;
                stroke-width: 0.5px;
            }

            .counties {
                fill: none;
            }
        </style>
    </head>
    <body>
        <svg height = "960" width = "1000"></svg>
        <script type = "text/javascript">
            var svg = d3.select("svg");
            var path = d3.geoPath();

            var data = d3.map();

            var color = d3.scaleLinear()
                .domain(0, 10000, 500000, 800000, 1000000)
                .range(["blue", "aqua", "purple", "indigo", "green"]);

            d3.queue()
                .defer(d3.json, "https://d3js.org/us-10m.v1.json")
                .defer(d3.tsv, "PEP_2018_PEPANNRES.tsv", function(d){
                data.set(d.GEOID, +d.rate);
                })
                .await(ready);

            //The syntax is this (error, deferVariable1, deferVariable2)
            function ready(error, us, tsv) {

                svg.append("g")
                    .attr("class", "counties")
                    .selectAll("path")
                    .data(topojson.feature(us, us.objects.counties).features)
                    .enter()
                    .append("path")
                    .style("fill", function(d) {

                   //The join works          
                   console.log(data.get(d.id))

                        if (data.get(d.id)) {
                            return color(data.get(d.id));   
                        } else {
                            return "black";
                        }
                    })
                    .attr("d", path);

                //Draw the boundaries
                svg.append("path")
                    .attr("class", "county-borders")
                    .attr("d", path(topojson.mesh(us, us.objects.states, 
function(a, b){ return a !== b; })));


        }; 


        </script>
    </body>
</html>
...