D3.js 图表画笔和 Crossfilter.js 比例不同步

Question

我正在尝试使用画笔范围突出显示我的 D3 条形图中的选择。

JSFiddle http://jsfiddle.net/Nyquist212/yys2mqkx/

我正在使用交叉过滤器 reduceCount() 我的数据，这样我就可以绘制得分分布图。但这似乎和我的 x-scale 搞混了。当您拖动整个画笔范围时，效果最为明显。

具有完整数据集的在线示例是 here（加载需要几秒钟）。

我正在使用线性刻度，但画笔坐标似乎与条形图坐标不同步 space（请参阅控制台日志记录）。

我的笔刷范围似乎没有正确绑定到它前面的 rects。

我的问题似乎出在第 840 行，我正在尝试做这样的事情，

var extent = brush.extent(), 
    lower = extent[0], 
    upper = extent[1];

d3.selectAll("rect")
  .style("opacity", function(d) {
       return d.key >= lower && d.key <= upper || brush.empty() ? "1" : ".4";
       })

 }

我正在努力实现 this effect 突出显示选定的条形并淡化未选定的条形。

有人可以帮助我理解我做错了什么吗？

谢谢。

Answer 1

笔刷希望使用您传入的 x 比例来反转鼠标坐标以在域中产生目标值(source). Unfortunately, you're not actually using that x scale to draw the bars, so it looks like the brush is off. In fact, it's your bars that are off, which can be seen by updating line 806 to actually use the x scale that the brush is using. (jsfiddle)

    .attr("x", function (d, i) {
        return x(d.key);
    })

好吧，那太好了，但显然它根本不是您要找的东西。

现在您只需要弄清楚如何生成一个 x 比例尺，它可以为条形图和画笔完成您想要的操作。 Linear Scales API 文档将在那里提供很大帮助。

编辑： 这应该可以帮助您入门。更新比例以使用以键为域的序号。

var keys = byScrGrp.all()
    .map(function (d) { return d.key; });

var x = d3.scale.ordinal()
    .domain(keys)
    .rangeBands([0, width]);

更新条形渲染以使用新的序数比例。

    .attr("x", function (d) {
        return x(d.key);
    })
    .attr("width", x.rangeBand())

更新 brushmove 方法以暴力选择哪些组。

    svg.selectAll("rect")
        .style("opacity", function(d) {
            var k = x(d.key) + 0.5 * x.rangeBand();
            return  s[0] <= k && k <= s[1] ? "1" : ".2"; 
        });

同时更新画笔初始化程序以使用新坐标。

    .extent([x(1.1),x(0.9)])

对我来说 Chrome 做的不错，但是 Firefox 有点卡，至少在 JSFiddle 里面是这样。这里显然有优化的机会。

fiddle

D3.js 图表画笔和 Crossfilter.js 比例不同步

D3.js chart brush and Crossfilter.js scales out of sync

javascript

brush

scale

d3.js

crossfilter