Question

我是菜鸟。我使用d3.map（）将tsv文件加入了Mike Bostock的topojson。该连接有效，如果我用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>

d3色度图仅显示一种颜色

0 个答案: