如何在dc.js图表​​中使过滤器透明

时间：2017-12-12 01:27:04

标签： dc.js

我正在尝试使用dc.js制作条形图。用户可以通过单击并拖动过滤器来选择部分数据。然而，困难在于，当发生这种情况时，在我的网站上，过滤器是完全黑色的，并且所选数据被遮挡： Black filter

应该发生的情况是，过滤器应该是部分透明的，如this example中的home page of dc.js所示，以便仍然可以看到所选数据。

以下是我用来生成页面的示例代码。我使用的是Crossfilter版本1.3.14，d3.js版本3.5.17和dc.js 2.1.9。

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="static/dc.css.min"/>
</head>
<body>
    <div id="graph"></div>
    <script type="text/javascript" src="static/d3.js"></script>
    <script type="text/javascript" src="static/crossfilter.js"></script>
    <script type="text/javascript" src="static/dc.min.js"></script>
    <script type="text/javascript">
    var data = "data/page.csv";
    d3.csv(data, function(error, records) {
        var ndx = crossfilter(records);
        var keyDimension = ndx.dimension(function(d) {return d.key;});
        var valueGroup = keyDimension.group().reduceCount();

        var graph = dc.barChart("#graph");
        graph.width(500)
             .height(300)
             .x(d3.scale.linear().domain([0,15]))
             .xUnits(function(){return 50;})
             .dimension(keyDimension)
             .group(valueGroup);
        graph.render();
    });
    </script>
</body>

1 个答案:

答案 0 :(得分：1)

我将缩小的直流文件（dc.min.css，dc.min.js，dc.min.js.map）替换为下载的完整等效文件（dc.css，dc.js，dc.js.map）来自Github，现在过滤器正常显示。

相关问题
最新问题