如何在 dc.js 图表中使过滤器透明
How to make filter transparent in dc.js charts
我正在尝试使用 dc.js 制作条形图。用户可以通过单击并拖动过滤器来 select 部分数据。然而,困难在于,当这种情况发生时,在我的网站上,过滤器完全变黑并且数据 selected 被遮挡:
应该发生的是,过滤器应该是部分透明的,如 this example from the home page of dc.js,这样 selected 数据仍然可以看到。
这是我用来生成页面的示例代码。我正在使用 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>
我用完整的等效文件(dc.css、dc.js、dc.js.map) 从 Github 下载,现在过滤器正常显示。
我正在尝试使用 dc.js 制作条形图。用户可以通过单击并拖动过滤器来 select 部分数据。然而,困难在于,当这种情况发生时,在我的网站上,过滤器完全变黑并且数据 selected 被遮挡:
应该发生的是,过滤器应该是部分透明的,如 this example from the home page of dc.js,这样 selected 数据仍然可以看到。
这是我用来生成页面的示例代码。我正在使用 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>
我用完整的等效文件(dc.css、dc.js、dc.js.map) 从 Github 下载,现在过滤器正常显示。