DC.js 刷到 select 范围不适用于 scaleTime

Question

序言这是我第一次发布到 Whosebug，我是 dc.js 的菜鸟。对礼节违规行为提前致歉（也欢迎反馈）

问题我已经定义了一个条形图并且它显示完美，但是 brushOn(true) 不允许我过滤数据。过去，这似乎与我将鼠标悬停在条形图上时出现的十字准线完美配合。现在不是了。知道为什么吗？或者我能做些什么来解决它？我在第 3 天试图弄清楚发生了什么。非常感谢您的帮助！

先决条件：

https://d3js.org/d3.v5.min.js
crossfilter.min.js
https://unpkg.com/dc@3.0.4/dc.js

条形图代码 我定义了一个条形图如下：

filterDim = cross.dimension(function(d){return d3.timeWeek(d.date);});
var filterGroup = filterDim.group().reduceSum(function(d){
    if(d.isTrue){return 1;}
    else {return 0;} });

height=400;
if(width == 0){
    width = $(dom_id).parent().innerWidth();
}
var hitsbarChart  = dc.barChart(dom_id);
hitsbarChart
    .width(width).height(height)
    .dimension(sentDimension)
    .group(allGroups[0].data,allGroups[0].name)
    .xUnits(d3.timeWeeks);

hitsbarChart
    .x(d3.scaleTime())
    .valueAccessor(function(d){return d.value;})
    .keyAccessor(function(d){return d.key;})
    .round(d3.timeWeek.round)
    .yAxis().ticks(d3.format('.3s'));

    function calc_domain(chart) {
        var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
        max = d3.max(chart.group().all(), function(kv) { return kv.key; });
        max = d3.timeMonth.offset(max, 1);
        chart.x().domain([min, max]);
    }
hitsbarChart.on('preRender', calc_domain);
hitsbarChart.on('preRedraw', calc_domain);

hitsbarChart.brushOn(true);
dc.renderAll();

研究

我发现 this example 它展示了一些不同的东西，但输出了一个以时间序列为 x 轴和工作画笔到 select 日期范围的图表。

此外，还有 this bug with work-around，但变通办法没有奏效。我无法想象时间序列数据更像是一个序数尺度而不是数字尺度。

Answer 1

很可能您有一些 CSS 无意中影响了您的图表，而图表本应控制页面的其他部分。

发生这种情况的原因可能是您使用了 dc.js 或 d3.js 也使用的通用名称，或者是另一个库中的样式 sheet。所有 dc.js's style rules 都经过仔细界定，以免影响其他任何人，但许多常用词用于 class 名称，因此其他方式的干扰很常见。

刷牙行为来自 d3，所以我会尝试在您的开发人员工具的检查器中查看 d3 的 g.brush rect.overlay。您应该能够通过右键单击图表背景并选择“检查”来调出它。

如果它有类似的东西

pointer-events: none;

或

display: none;

适用于它，找出它适用的是什么（希望 CSS 你能控制）并尝试使规则更具体。

当然也有可能来自其他库的 JavaScript 造成这样的麻烦，但是来自 CSS 的干扰更为常见。

DC.js 刷到 select 范围不适用于 scaleTime

DC.js brush to select range not working with scaleTime

javascript

dc.js