D3.js 使用 Ordinal Crossfilter Scales 的画笔控件

Question

我的目标是像 this wonderful example. 这样子集我的 choropleth 我已经查看了 API 文档和 Mike's Ordinal Brushing example。

不幸的是，我仍然不明白画笔应该如何工作。

这些示例非常复杂，对于新手来说有些难以理解（大量的车削运算符和图表对象数组等）。

我选择不使用 dc.js，因为缺乏对我以后必须处理的事情的支持。不错的工作和尼克齐朱的道具。

有人可以查看我的（原生 d3）方法并告诉我我做错了什么吗？

我设置了条形图，效果很好。基本上是正态分布中值的计数。

// Setup Crossfilter dimensions and groups
var nation      = crossfilter(MSPB),
    byScr       = nation.dimension(function(d){ return d.score; }),
    byScrGrp    = byScr.group().reduceCount(),
    byHosp      = nation.dimension(function(d){ return d.FIPS; }); 

// Histogram X-Axis ordinal scale
var x = d3.scale.ordinal()
        .domain(d3.range(0,2,0.1))
        .rangeBands([0, width, 0.5, 0.5 ]);

// Histogram Y-Axis linear scale
var y = d3.scale.linear()
        .domain([0, d3.max(byScrGrp.all(), function(d){ return d.value; })])
        .range([height/2, 0]);

// Histogram SVG containiner    
var svg = d3.select("#histogram").append("svg:svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height/2 + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Histogram bars
    svg.selectAll("rect")
        .data(byScrGrp.all())
        .enter().append("rect")
        .attr("x", function(d,i){ return i * (width / byScrGrp.size() ); })
        .attr("width", width / byScrGrp.size() - barPadding )
        .attr("y", function(d){ return  y(d.value) ; })
        .attr("height", function(d){ return ((height/2) -y(d.value)); })
        .attr("fill", function(d){ return color(d.key); })
        .on("mouseover", function(d){ d3.select(this).attr("fill", "teal"); })
        .on("mouseout", function(d) { d3.select(this).attr("fill", function(d){return color(d.key);}) } );

紧接着，我尝试像这样添加我的画笔控件。最初我只想让拖动选择在条形图上工作。稍后我会担心获取 xAxis 范围值以过滤等值线。

 var brush = d3.svg.brush()
            .x(x)
            .on("brushstart", brushstart)
            .on("brush", brushmove)
            .on("brushend", brushend)

var brushg = svg.append("g")
            .attr("class", "brush")
            .call(brush)

    brushg.selectAll("rect")
                .attr("height", height/2)
                .attr("width", width);


function brushstart() {
  svg.classed("selecting", true);
}

function brushmove() {
  var s = brush.extent();
  brushg.classed("selected", function(d) { return s[0] <= (d = x(d)) && d <= s[1]; });
}

function brushend() {
  svg.classed("selecting", !d3.event.target.empty());
}

我看到了十字准线拖动手柄，但没有看到我所期望的，当然也没有达到预期的效果。

除了full js file is here 和partially working example here，这个网络服务器很慢。

编辑：我试图创建一个JSFiddle here.

任何指针将不胜感激。

谢谢

Answer 1

如果不进行实验就很难说（是否有机会创建 JSfiddle 或类似的？）。我怀疑问题是您正在设置画笔中所有矩形的宽度。你只需要设置高度，我相信。这可能是导致您的范围变得疯狂的原因。

一旦你理顺了这一点，你就需要根据画笔范围过滤你的 Crossfilter 维度。

此外，Crossfilter 的 group.reduceCount 函数不带参数，如果您可能缺少数据，您需要确保在维度访问器中测试/转换您的数据，以确保它们始终返回自然排序的数字或字符串。