DC.js choropleth map chart CSSが色付けと競合し、地図が表示されません。どのようにフィルを消すことができますか？

私はdc.jsのjavascriptとcssをインポートするhtmlコードを含めました。私はページをロードするとき、すべての要素が正しい場所にあります。郡のパス要素を選択し、fill：none cssの選択を解除すると、地図が表示されるようになります。スクリーンショット：fill:none ON fill:none OFF DC.js choropleth map chart 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に見つけることができる唯一の参考文献は

に渡す名前は、クラス名として使用され、それは明らかに消去されている理由です。回避策として、その名前を変更することはできますか？

私はこれをバグin this commentとして記録しました。

出典

2016-12-14 20:26:31 Gordon

涼しい！ありがとう。 – lorilew

DC.js choropleth map chart CSSが色付けと競合し、地図が表示されません。どのようにフィルを消すことができますか？

答えて

関連する問題