nvd3: Bewegung eines Pinsels deaktivieren?

Question

Ich verwende nvd3s lineWithFocusChart in einem Projekt. Mein Kunde möchte die Größe der Pinsel mithilfe der Start- und Endschalter ändern können, aber die Funktion "Bewegen des Pinselbereichs" durch Ziehen ist nicht erwünscht. Mein erster Versuch war der Event-Handler false zurück zu machen, wenn eine Bewegung erkannt wird:

chart.focus.dispatch.on("brush.start", function(evt) { 
       if (d3.event.mode === "move") { 
        console.log("Aborting move operation"); 
        d3.event.sourceEvent.stopPropagation(); 
        d3.event.sourceEvent.preventDefault(); 
        return false; 
       } else { 
        console.log("Ok"); 
        return true; 
       } 
      }); 

Dies funktioniert nicht - während ich cleary zwischen einem Zug und einem Resize unterscheiden kann, der Rückkehr von der Event-Handler noch beide erlaubt Operationen. Ich denke, dass der Code in meinem Event-Handler danach ausgeführt wird.

Ich möchte die ursprüngliche Quelle der Bibliothek nicht ändern, da sie über npm enthalten ist und alle Update-Mechanismen und Neuinstallationen des Projekts auf anderen Systemen brechen würde.

Irgendwelche Vorschläge? Danke im Voraus!

Answer 1

Sie dies mit nur CSS ziemlich leicht erreichen können:

/*Only permit move */ 
/*Remove ability to drag/ double-click focus */ 
    .nv-brush>.background{ 
     display:none; 
    } 
/*Remove ability to resize focus*/ 
    g.resize{ 
     display:none; 
    } 

:

/*Only permit resize */ 
/*Remove ability to drag/ double-click focus */ 
    .nv-brush>.background{ 
     display:none; 
    } 
/*Remove ability to move focus */ 
    .nv-brush>.extent{ 
     display:none; 
    } 

Wenn Sie die Größe ändern und nur verlassen die Fähigkeit zu bewegen, um den Fokus entfernen wollte