Bürsten auf ordinalen Daten funktioniert nicht

Question

Ich mag this graph und seine Funktionalität und es ist perfekt für das, was ich will/brauche. Das einzige, was ich ändern muss, ist, dass ich ordinale Daten auf der y-Achse zulassen muss, und ich kann nicht scheinen, dass das funktioniert (ich bin ein Anfänger).

Wenn ich ändern, um die y-Skala von linear ordinal:

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

zu

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

Brushing noch auftaucht und arbeitet für sich, aber es filtert nicht die ausgewählten Linien zu verlassen. Es werden keine Linien angezeigt, wenn ich sie nicht ganz oben auf der Achse bewege, dann erscheinen alle oder meistens alle. Als ich den Code mit Firebug durchging, sah es so aus, als würde es nicht die Linien bekommen, die im Pinselbereich lagen, sondern alles (?) ... und ich kann es nicht verstehen. :(

Wenn jemand dabei helfen konnte (vor allem alle Orte, die ich ändern müssen, und wie), würde ich gerne diese Arbeit bekommen und lernen, was ich tue, falsch: - \

Answer 1

Brushing eine Ordnungs Achse gibt die Pixel, während eine quantitative Achse Bürsten die Domäne zurückgibt.

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

die Skala typischerweise als quantitative Skala definiert ist, wobei in diesem Fall das Ausmaß, in dem Datenraum ist vomDomain der Domäne; Es kann jedoch stattdessen als eine ordinale Skala definiert werden, wobei der Umfang im Pixelraum vom Bereich der Skala liegt.

Meine Vermutung ist, dass Sie rückwärts arbeiten müssen und die Pixel zu den Domänenwerten übersetzen. Ich habe diese Frage gefunden, weil ich versuche, das Gleiche zu tun. Wenn ich es herausfinde, werde ich es dich wissen lassen.

EDIT: Hier ist ein tolles Beispiel, um loszulegen.

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]; }); 
} 

Er packt die Auswahl Ausmaß (in Pixel), wählt dann alle der Reihenelemente und bestimmt, ob sie innerhalb des Umfangs liegen. Sie können Elemente basierend darauf filtern und Datenschlüssel zurückgeben oder was Sie Ihren Filtern hinzufügen müssen.

Answer 2

Es ist ein Beispiel für eine Ordinalskala mit hier Bürsten:

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

Die Grundidee ist, wie @gumballhead schon sagt, sind Sie dafür verantwortlich, die Pixelwerte wieder auf den Eingangsbereich für vorsteht. Der entsprechende Ausschnitt aus dem Beispiel ist:

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(","));}