I'm wondering if it's possible to show the area inside a brush as a different color or different opacity level as the area outside the brush. I'm using the focus+context example as a starting point (http://bl.ocks.org/mbostock/1667367). I'm wondering if the area in the lower histogram (where the brush exists) can be rendered with an alpha channel of 0.5, and the area inside the brush could have an alpha of 1.0. Is this possible? I've been working on this problem for several days, and can't seem to come anywhere close to a solution. Thanks in advance.
EDIT** Ok. I think I understand the basic concepts from your comment below about adding a conditional fill... but I'm having difficulty implementing it. In the original example (http://bl.ocks.org/mbostock/1667367), the focus is the main histogram, and context is the smaller one with the brush. I thought I could add two lines to the brushed function in order to color the area on the context histogram that's inside the brush a different color... but it doesn't quite work. I get an error in the console window saying "Cannot read property length of undefined". Here's what my brushed function looks like:
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select("path").attr("d", area);
focus.select(".x.axis").call(xAxis);
//these are the two lines that I've added
context.select("path").attr("d", area)
.style("fill", "#ff0000");
}
You can see I'm not actually using the conditional fill part... but I thought that the brushed function was returning a clipped set of data "area" and I thought I could use the same area but attributed to the context (instead of the focus)... but this didn't work.
