d3.js - Hinzufügen von Zoom und Pan verhindert Knoten ziehen

Question

I Zoom-Funktionen zu meinem Diagramm mit dem folgenden Code (Schnipsel) hinzugefügt habe:

zoomed =() => { 
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
}; 

zoom = d3.behavior.zoom() 
    .scaleExtent([0.3, 1.5]) 
    .on("zoom", zoomed); 

svg = d3.select("body") 
    .append("svg:svg") 
    .attr("width", width) 
    .attr("height", height) 
    .call(zoom) 
    .append('svg:g'); 

Dies funktioniert wie erwartet. Ich kann den gesamten Graphen vergrößern oder verkleinern. Ich kann jedoch die Position eines Knotens nicht mehr beeinflussen, da ein "Klick" das Verschieben auslöst.

Mein Schleppen ist wie folgt definiert:

dragStart = function(d) { 
    d.fixed = true; 
}; 

drag = d3.drag() 
    .on("dragstart", dragStart); 

node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter() 
    .append("rect") 
    .attr("class", "node") 
    .attr("width", function (d) { return d.width - 2 * pad; }) 
    .attr("height", function (d) { return d.height - 2 * pad; }) 
    .attr("rx", 5).attr("ry", 5) 
    .call(drag); 

Ich bin mir nicht sicher, was ich falsch mache, aber meine Implementierung steht im Einklang mit allen Beispielen I mit ähnlicher Funktionalität finden konnte. Jede Hilfe wäre willkommen.

Answer 1

Ich landete Panning zu deaktivieren, um es durch das Deaktivieren Click-Ereignisse auf Zoom funktioniert:

selection.call(zoom) 
    .on("mousedown.zoom", null)