Wie erstelle ich einen Pinsel mit Standardgröße auf D3?

Question

Ich habe Probleme zu verstehen, wie Pinsel/Extents auf D3 4.0 arbeiten. Ich möchte einen Pinsel erstellen, den ich entlang der Y-Achse eines SVG-Elements ziehen kann, und ich möchte, dass der Pinsel bereits beim Laden der Seite erstellt wird. Ich möchte nicht, dass der Benutzer entlang des zu erstellenden Elements ziehen muss es. (Dieses Beispiel enthält beispielsweise einen Pinsel, der beim Laden der Seite erstellt wird. http://bl.ocks.org/raffazizzi/3691274).

Das ist, was ich bisher habe:

var verticalRectangle = d3.select(".svgrectangle") 
    .attr("width", 100) 
    .attr("height", 500) 
    .append("g") 

var yBrush = d3.brushY() 

verticalRectangle.append("g") 
    .attr("class", "brush") 
    .call(yBrush); 

Gerade jetzt diese erzeugen ein Rechteck, das ich Bürsten erstellen kann auf von seinem Innern ziehen, ich die Bürste will bereits auf dem Rechteck auf Last angelegt werden (am unteren Rand des Rechtecks ​​mit einer Breite von 100 und einer Höhe von 10). Ich glaube, dass pinsel.extent() dafür verwendet werden kann, aber ich bin mir nicht sicher, was das richtige Argument in diesem Fall wäre. Viele der Beispiele verwenden D3 3.0 und sie benutzen Pinsel mit Skalen, was ich glaube, dass sie in 4.0 nicht mehr nötig sind. Danke für die Hilfe.

Answer 1

Ich habe herausgefunden, wie es geht. Ich muss den Pinsel bewegen und den Bereich festlegen, den meine Auswahl umfassen soll. Zum Beispiel -

var verticalRectangle = d3.select(".svgrectangle") 
    .attr("width", 100) 
    .attr("height", 500) 
    .append("g") 

var yBrush = d3.brushY() 
    .extent([[0,0], [100,500]]) //Area you want your brush to be movable in 
    .on("brush", brushed); 

verticalRectangle.append("g") 
    .attr("class", "brush") 
    .call(yBrush) 
    .call(yBrush.move, [5, 100]); //What area you want your brush selection to initially take