DC.js choropleth地圖圖與着色相沖突的CSS，未顯示地圖。我怎樣才能關閉填充：無？

我已經包括下面的html代碼，它導入dc.js的JavaScript和CSS。當我加載頁面時，所有的元素都在正確的位置。當我選擇縣級路徑元素並取消選擇填充時：none css，那麼地圖會顯示它應該顯示的內容。屏幕截圖：fill:none ON fill:none OFF DC.js choropleth地圖圖與着色相沖突的CSS，未顯示地圖。我怎樣才能關閉填充：無？

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>D3: Choropleth</title> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.css" rel="stylesheet"/> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script> 
    <style type="text/css"> 
    body { 
      background-color: gray; 
     } 
     svg { 
      background-color: white; 
     } 
    </style> 
</head> 
<body> 
    <div id="uk-chart"> 
     <strong>Customer locations</strong> 
     <div class="clearfix"></div> 
    </div> 
    <script src="data/customers.js"></script> 
    <script type="text/javascript"> 
    var ukgraph = function(){ 
    var ukChart = dc.geoChoroplethChart("#uk-chart"); 

     //Width and height 
     var w = 300; 
     var h = 500; 
    // 
     //Define map projection 
     var projection = d3.geo.mercator() 
           .center([ -2, 55 ]) 
           .translate([ w/2, h/2 ]) 
           .scale([ w*4 ]); 

     //Define path generator 
     var path = d3.geo.path() 
         .projection(projection); 

    var cf = crossfilter(data); 
    var county_dimension = cf.dimension(function(d){ 
     return d.address_line5; 
    }); 
    var county_groups = county_dimension.group(); 


      // //Load in GeoJSON data 
      d3.json("data/geo/simplified_GB.json", function(json) { 

     ukChart.width(w-10) 
       .height(h-10) 
       .projection(projection) 
       .dimension(county_dimension) 
       .group(county_groups) 
       .colors(['#ccc', "#ffffb2", "#fecc5c", "#fd8d3c", "#f03b20", "#bd0026" ]) 
       .colorDomain([ 
       d3.min(county_groups, function(d) { return +d.value; }), 
       d3.max(county_groups, function(d) { return +d.value; }) 
       ]) 
       .overlayGeoJson(json.features, "county", function (d) { 
         return d.properties.NAME_2; 
       }) 
           .title(function (p) { 
         return "customer locations"; 
       }); 

      dc.renderAll(); 

      }); //End d3.json() 
     }; 
     window.onload = function() { 
      ukgraph(); 
     } 
    </script> 
</body> 
</html>

我該如何解決這個問題，從而在地圖上顯示頁面加載時？

來源

2016-12-14 lorilew

這很可疑dc.css顯式提到類名county。

.dc-chart g.county path { 
    stroke: white; 
    fill: none; 
}

dc.js不應該關心你正在使用什麼特定的數據。我可以找到county的唯一參考文件是web/play-ground.html

您傳遞給overlayGeoJson的名稱被用作類名，這顯然是它被刪除的原因。作爲解決方法，您可以更改該名稱，對嗎？

我將其作爲bug in this comment進行了登錄。

來源

2016-12-14 20:26:31 Gordon

很酷的工作！謝謝。 – lorilew

DC.js choropleth地圖圖與着色相沖突的CSS，未顯示地圖。我怎樣才能關閉填充：無？

回答

相關問題