d3 topojson 不会生成状态轮廓

Question

我正在尝试生成本教程中的状态轮廓 http://duspviz.mit.edu/d3-workshop/mapping-data-with-d3/ 朝向底部。除了州大纲之外，我已经获得了其他所有内容。

var width2 = 720;
        var height2 = 500;

        var projection = d3.geoAlbers()
            .scale(1000)
            .translate([width2/2, height2/2]);

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

        var path2 = d3.geoPath()
            .projection(null);

        var svg = d3.select("#map2").append("svg")
            .attr("width", width2)
            .attr("height", height2);

        d3.queue()
            .defer(d3.json, "../data/us.json")
            .defer(d3.tsv, '../data/us_unemployment_2008.tsv')
            .await(ready);  //run ready when jsons are loaded

        function ready(error, us, us_unemployment_2008){
            if (error) throw error;

            var ratebyid = {};
            us_unemployment_2008.forEach(function(d){
                ratebyid[d.id] = +d.rate;
            });

            svg.append('g')
                .attr('class','counties')
                .selectAll('path')
                .data(topojson.feature(us, us.objects.counties).features)
                .enter().append('path')
                .attr('d', path)
                .style('fill','white')
                .style('stroke','black');

            var color = d3.scaleThreshold()
                .domain([0.02, 0.04, 0.06, 0.08, 0.10])
                .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);

            svg.append('g')
                .attr('class','counties')
                .selectAll('path')
                .data(topojson.feature(us, us.objects.counties).features)
                .enter().append('path')
                .attr('d', path)
                .style('fill', function(d){
                    return color(ratebyid[d.id]);
                });

            svg.append("path")
                .datum(topojson.mesh(us, us.objects.states, function(a, b) {
                    return a.id !== b.id;
                }))
                .attr("class", "states")
                // .attr('fill','none')
                .attr("d", path);
        }

碎片看起来像这样：

我可以通过将.attr('fill', 'none') 添加到 svg 路径来解决此问题。但现在它不像教程中那样显示状态的白色轮廓。

现在看起来像这样：

这就是我想要的样子：

Answer 1

添加.attr("stroke","white") 就可以了。我以为我已经尝试过了。据我了解，这不是必需的，因为本教程没有包含此内容，但它可以工作。