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，未显示地图。我怎样才能关闭填充：无？

回答

相关问题