不尋常的黑色形狀

https://www.dropbox.com/s/znno4krx64zs3hm/Screenshot%202014-12-04%2015.11.10.png?dl=0 不尋常的黑色形狀

我開始適應地區分佈D3代碼。這裏的代碼將choropleth放入頁面

//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翻譯成格式爲[{'id':'some id','rate':'some rate},...{'id':'some id','rate':'some rate'}]的JSON數據。它被放置在頁面的正確部分，並且所有的部分都正確移動，除非當繪製choropleth時，它看起來像this。我想不出有什麼理由讓這些大規模的黑色斑點遍佈整個地圖，儘管我並不特別瞭解一些代碼是如何工作的，大部分是數據用來爲地圖着色的部分。有沒有人知道什麼可能會導致這種影響等高線地圖？

來源

2014-12-04 Jesse Green

你複製CSS，尤其是'補：none'爲'.states'？ – 2014-12-04 20:32:52

完全滑倒了我的想法，修復了它。 – 2014-12-04 20:38:41

發生什麼事情是代表狀態的path元素在默認情況下填充爲黑色。這些是你看到的奇怪的形狀 - 大部分被縣paths遮蓋，但其中一些仍然可見。

爲了防止這種情況發生，複製從你鏈接到例如CSS，特別是

.states { 
    fill: none; 
}

來源

2014-12-04 20:53:50

不尋常的黑色形狀

回答

相關問題