D3.js and Crossfilter.js chart diagram scale out of sync
I am trying to select a selection in my D3 histogram using the brush size.
JSFiddle http://jsfiddle.net/Nyquist212/yys2mqkx/
I am using a crossfilter on reduceCount()
my data so I can calculate the distribution of the scores. But that seems to screw up my x scale. The effect is most noticeable when you drag the entire brush area.
An example online with a complete dataset is here (takes a few seconds to download).
I am using linear scales, but it seems that the brush coordinates are out of sync with the coordinate space of the histogram (see console logging).
My brush extension doesn't seem to be properly tied to the rects
front of it.
My problem seems to lie around line # 840 where I am trying to do something like this,
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";
})
}
I am trying to achieve this effect , which highlights the selected stripes and fades out unselected.
Can anyone help me understand what I am doing wrong?
Thank.
source to share
The brush expects to use the x scale you passed in to invert the mouse coordinates to get the target value in the ( source ) domain . Unfortunately, you are not actually using this x scale to draw bars, so it looks like the brush is off. In fact, these are your bars that are off, which can be seen by updating line 806 to actually use the x scale that the brush uses. ( jsfiddle )
.attr("x", function (d, i) {
return x(d.key);
})
Ok, that's great, unless it's clearly not what you're looking for.
Now all you have to do is figure out how to create an x scale that will do what you want for both the bars and the brush. Linear Scales The API documentation will be very helpful here.
EDIT: This should get you started. Update the scale to use the keyed sequence number as the domain.
var keys = byScrGrp.all()
.map(function (d) { return d.key; });
var x = d3.scale.ordinal()
.domain(keys)
.rangeBands([0, width]);
Update the stroke rendering to use the new ordinal scale.
.attr("x", function (d) {
return x(d.key);
})
.attr("width", x.rangeBand())
Update the brushmove method to iterate over the groups that have been selected.
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";
});
Also update the brush initializer to use the new coordinates.
.extent([x(1.1),x(0.9)])
For me, Chrome does a great job with this, but Firefox is kind of chokes, at least inside the JSFiddle. There is clearly room for optimization here.
source to share