Ordinal cleaning does not work

Question

I really like this graph and its functionality, and it is perfect for what I want / need. The only thing I need to change is I need to allow ordinal data on the y axis, and I can't get this to work (I'm a newbie).

When I change the y scale from linear to ordinal:

yscale[k] = d3.scale.linear() .domain(d3.extent(data, function(d) { return +d[k]; })) .range([h, 0]));

to

 yscale[k] = d3.scale.ordinal().rangePoints([h, 0]), yscale[k].domain(data.map(function(d) { return d[k]; }))) 

The purge still appears and works on its own, but does not filter, leaving the selected lines. No lines appear, if I did not move them to the very top of the axis, then all or almost all will appear. When I went through the code with firebug, it looks like it just didn’t get the lines that were in the brush area, but all (?) ... and I can’t understand. :(

If anyone could help with this (especially all the places that I need to change and how), I would like this work and find out what I'm doing wrong: - \

Answer 1

Cleaning the ordinal axis returns pixels, and cleaning the quantitative axis returns the domain.

https://github.com/mbostock/d3/wiki/SVG-Controls#wiki-brush_x

A scale is usually defined as a quantitative scale, in which case the degree is in the data space of the scale domain; however, it can be defined as an ordinal scale, where the size is in the pixel space from the range of the degree scale.

I assume you need to work back and translate the pixels into domain values. I found this question because I am trying to do the same. If I find out, I'll let you know.

EDITOR: Here is a great example to get you started.

http://philau.willbowman.com/2012/digitalInnovation/DevelopmentReferences/LIBS/d3JS/examples/brush/brush-ordinal.html

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

It captures the selection (in pixels), then selects all the elements in the series and determines if they are within. You can filter items based on this and return data keys or whatever you can add to your filters.

Answer 2

The following is an example of an ordinal scale with a brush:

http://bl.ocks.org/chrisbrich/4173587

The basic idea is that, as @gumballhead points out, you are responsible for projecting the pixel values ​​back into the input domain. Corresponding fragment from the example:

 brushed = function(){var selected = yScale.domain().filter(function(d){return (brush.extent()[0] <= yScale(d)) && (yScale(d) <= brush.extent()[1])}); d3.select(".selected").text(selected.join(","));}