Wie Mausklick und ziehen die Verwendung in D3 vergrößern

Question

ich D3 bin neu und möchte eine Click-Drag-Zoom ähnlich wie das umzusetzen, was hier gezeigt wird: http://www.highcharts.com/demo/line-time-series

ich bereits ein Liniendiagramm habe ich habe gebaut, bin aber verwirrt, wie dies zu implementieren ist.

Ich denke, ich brauche ein paar JS-Event-Handler, um zu finden, wo mein Mousedown und Mouse-Up passiert. Aber wie erstelle ich die Schattierung, die im Diagramm auftritt, wenn der Benutzer zieht?

Answer 1

Sie werden wahrscheinlich eine brush verwenden, um dies in zu tun. Sie können ein Beispiel sehen, das ich bei http://bl.ocks.org/1962173 zusammensetze, das etwas Ähnliches tut.

der entsprechende Code ist:

var brush = d3.svg.brush() 
    .x(x) 
    .extent([d3.time.monday(now),d3.time.saturday.ceil(now)]) 
    .on("brush", display); 

wo display ist eine Funktion, die Daten basierend auf dem aktuellen Ausmaß der brush neu zeichnet. Auf diese Weise müssen Sie nicht versuchen, Ihre eigenen Handler anzuhängen oder sich überhaupt Sorgen über die Größenänderung der markierten Region zu machen.