1

https://www.dropbox.com/s/znno4krx64zs3hm/Screenshot%202014-12-04%2015.11.10.png?dl=0

我开始在这里调整 choropleth d3 代码。这是将等值线放入页面的代码

//initialize the map's dimensions
var width = 960;
var height = 500;

//define the display threshold
var color = d3.scale.threshold()
    .domain([.02, .04, .06, .08, .10])
    .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);

var path = d3.geo.path();

//add the map image to the div
var svg = d3.select("#" + rowID + " .choropleth").append("svg")
    .attr("width", width)
    .attr("height", height);

//import data from REST interface
$.ajax({
    url: "<?php echo REST_URL; ?>",
    data: {"method": "getChoroplethData", "reportID": reportID, "mode": mode, "contents": JSON.stringify(window.reportData[reportID]['contents'])},
    success: function(response){
        response = parseJSON(response);
        var us = response['us'];
        var data = response['data'];
        var reportID = response['reportID'];

        var rateById = {};
        for(var i in data){
            rateById[data[i]['id']] = +data[i]['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", 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("d", path);

        //show the report
        $("#" + rowID + " .panel-body").slideDown();
    }
});

在大多数情况下，这是可行的。AJAX 调用的响应有 3 个部分。us是us.json上面的 choropleth 示例使用data的数据，包含从unemployment.tsv转换为 JSON 数据格式的数据[{'id':'some id','rate':'some rate},...{'id':'some id','rate':'some rate'}]。它被放置在页面的右侧，所有部分都在正确移动，除了绘制 choropleth 时它看起来像这样。我想不出任何理由让这些巨大的黑色斑点遍布整个地图，尽管我并不特别了解某些代码是如何工作的，主要是最后使用数据为地图着色的部分。有谁知道什么会导致对等值线图产生这种影响？

4

1 回答 1

2

发生的情况是，path代表状态的元素默认填充为黑色。这些是您所看到的奇怪形状 - 大部分都被县遮挡了paths，但其中一些仍然可见。

为防止这种情况发生，请复制您链接到的示例中的 CSS，尤其是

.states {
  fill: none;
}
于 2014-12-04T20:53:50.907 回答