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

Question

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

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

我正在使用crossfilter来reduceCount()我的数据，因此我可以绘制得分分布。但这似乎与我的x尺度紧密相关。拖动整个画笔范围时，效果最明显。

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

我正在使用线性比例，但看起来好像画笔坐标与条形图坐标空间不同步（请参阅控制台日志记录）。

我的画笔范围似乎没有正确绑定到它前面的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