javascript - D3.js 图表画笔和 Crossfilter.js 缩放不同步

Question

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

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

我正在使用 crossfilter 来reduceCount() 我的数据，这样我就可以绘制得分分布图。但这似乎与我的 x 尺度有关。当您拖动整个笔刷范围时，效果最为明显。

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

我使用的是线性刻度，但画笔坐标似乎与条形图坐标空间不同步(请参阅控制台日志记录)。

我的笔刷范围似乎没有正确绑定(bind)到它前面的 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 ) 中生成目标值。不幸的是，您实际上并没有使用那个 x 刻度来绘制条形，所以看起来画笔已关闭。事实上，是你的条关闭了，这可以通过更新第 806 行以实际使用画笔正在使用的 x 比例来看出。 ( 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