Question

序言这是我第一次发布到stackoverflow，并且是dc.js的新手。提前为违反礼节道歉（也欢迎对此提出反馈）

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

PREREQS：

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

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

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轴，并使用工作笔刷选择了一个日期范围。

也有this bug with work-around，但是解决方法没有用。我无法想象时间序列数据更像序数刻度，而不是数字刻度。

Answer 1

当应该控制页面的其他部分时，可能会有一些CSS意外地影响了图表。

这可能是因为您使用了dc.js或d3.js也使用的通用名称，还是因为另一个库的样式表使用了通用名称。所有dc.js's style rules的范围都经过精心设计，以使它们不会影响其他任何人，但是类名使用了许多常用词，因此以另一种方式进行干扰很常见。

刷牙行为来自d3，因此我尝试在开发人员工具的检查器中查看d3的g.brush rect.overlay。右键单击图表背景并选择“检查”，应该可以显示它。

如果有类似的东西

pointer-events: none;

或

display: none;

应用了它，找出应用了什么（希望由您控制的CSS）并尝试使规则更具体。

当然，另一个库中的JavaScript也可能引起此类问题，但是CSS的干扰更为常见。

DC.js笔刷选择不与scaleTime一起使用的范围

1 个答案: