D3.js Focus+Context via Brushing Ordinal Scale

Question

I am still very new to d3.js and have added a Focus + Context via Brushing to my Scatter plot that has a logarithmic y-Axis and ordinal x-Axis scale, but it isn't working as intended. Brushing seems to be working at an offset on the X-Axis but doesn't only show the item/items selected.

Below is my brushed function:

// Brush Function
function brushed() {
  var extent = brush.extent();
  var d = xScale2.domain(),
      r = xScale2.range();
  extent = extent.map(function(e) { return d[d3.bisect(r, e) - 1]; });
  xScale.domain(brush.empty() ? d : extent);
  focus.select(".x.axis")
        .call(xAxis)
       .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate (-65)");
  focus.selectAll(".point")
        .attr("d", d3.svg.symbol().type(function(d) { return symbols[d.TYPE_CODE]; }))
        .attr("transform", function(d) { return "translate(" + xScale(dateFn(d)) + "," + yScale(d.TYPE_VALUE) +  ")"; })
        .style("fill", function(d) { return colors[d.TYPE_CODE]; });
}

If anyone could help out with this (especially all the places I have to change and how), I would love to get this working and learn what I am doing wrong.

Full Code at: http://jsfiddle.net/brebuck/LL42b4L7/

Answer 1

Figured out my own solution to the problem.

Changed the Brush Function to:

// Brush Function
function brushed() {
  var extent = brush.extent();
  var d = xScale2.domain();

  // Find out what is selected between the extent on the Ordinal Axis.
  var SymbolInside = data.filter(function(d) {
    return extent[0] <= xScale2(dateFn(d)) && xScale2(dateFn(d)) <= extent[1];
  });

  // Convert the Array of objects to return a single array of dates used for the ordinal axis.
  SymbolInside = SymbolInside.map(function (d) { return dateFn(d); });

  xScale.domain(brush.empty() ? d : SymbolInside);
  focus.select(".x.axis")
        .call(xAxis)
       .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate (-65)");
  focus.selectAll(".point")
        .attr("d", d3.svg.symbol().type(function(d) { return symbols[d.TYPE_CODE]; }))
        .attr("transform", function(d) { return "translate(" + xScale(dateFn(d)) + "," + yScale(d.TYPE_VALUE) +  ")"; })
        .style("fill", function(d) { return colors[d.TYPE_CODE]; });
}

Updated Code at: http://jsfiddle.net/brebuck/LL42b4L7/