DC.js choropleth지도 차트 색칠하기와 충돌,지도가 표시되지 않습니다. 필을 끄려면 어떻게합니까?

나는 dc.js의 javascript와 css를 가져 오는 html 코드를 포함시켰다. 페이지를로드 할 때 모든 요소가 올바른 위치에 있습니다. 카운티 경로 요소를 선택하고 fill : none css의 선택을 취소하면지도가 올바르게 표시됩니다. 스크린 샷 : fill:none ON fill:none OFF DC.js choropleth지도 차트 색칠하기와 충돌,지도가 표시되지 않습니다. 필을 끄려면 어떻게합니까?

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에 전달한 이름이 사용되면서 지워지고있는 것 같습니다. 이 문제를 해결하려면 이름을 바꿀 수 있습니다.

나는 이것을 버그 in this comment로 기록했다.

출처

2016-12-14 20:26:31 Gordon

멋지다! 감사. – lorilew

DC.js choropleth지도 차트 색칠하기와 충돌,지도가 표시되지 않습니다. 필을 끄려면 어떻게합니까?

답변

관련 문제