D3.js图表刷和Crossfilter.js比例尺不同步

Question

D3.js图表刷和Crossfilter.js比例尺不同步

3

我正在尝试使用刷子范围在我的D3条形图中突出显示选择内容。 JSFiddle http://jsfiddle.net/Nyquist212/yys2mqkx/ 我使用交叉过滤器对数据进行reduceCount()，以便绘制得分分布。但是这似乎会影响我的x比例尺。当您拖动整个刷子范围时，效果最为明显。

在线示例与完整数据集在此处（需要几秒钟才能加载）。

我使用线性比例尺，但似乎刷子坐标与条形图坐标空间不同步（请参见控制台日志）。

enter image description 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";
       })

 }

我想要实现这种效果，高亮选中的条形图并淡化未选中的。

请问有人能帮助我理解我的错误在哪里吗？

谢谢。

- Colin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- couchand · Accepted Answer

这个画笔希望使用您传递的x比例尺来反转鼠标坐标以在域中生成目标值(源代码)。不幸的是，您实际上没有使用该x比例尺来绘制条形图，因此看起来画笔失效了。实际上，是您的条形图失效了，可以通过将第806行更新为实际使用画笔正在使用的x比例尺来查看(jsfiddle)。

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

好的，很不错，但显然这不是你想要的。

重叠的条形图

现在你只需要弄清楚如何产生一个适用于柱状图和刷子的x比例尺。通过查看线性比例尺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中是这样。这里显然存在优化机会。

示例