DC.js 等值线图 CSS 颜色冲突，未显示地图。如何关闭 fill:none？

Question

我已经包含了 html 代码，下面导入了 dc.js 的 javascript 和 css。当我加载页面时，所有元素都在正确的位置。当我 select 一个县路径元素和 deselect fill:none css 时，地图会按原样显示。屏幕截图：fill:none ON fill:none OFF

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>

`

如何解决此问题以便在页面加载时显示地图？

Answer 1

很可疑 dc.css 明确提到了 class 名字 county。

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

dc.js 不应该关心您使用的具体数据。我能找到的关于 county 的唯一参考是在 web/play-ground.html

您传递给 overlayGeoJson 的名称被用作 class 名称，这显然是它被删除的原因。作为解决方法，您可以更改该名称，对吗？

我已将其记录为错误 in this comment。

DC.js 等值线图 CSS 颜色冲突，未显示地图。如何关闭 fill:none？

DC.js choropleth map chart CSS conflicting with colouring, no map showing. How can I turn off the fill:none?

html

javascript

css

d3.js

dc.js