So verwenden Sie das D3-Zoom-Verhalten mit ViewBox anstelle von

Question

Ich möchte die Zoom-Funktionalität von D3 nutzen, aber ich muss alle Übersetzungen/Skalierungen meines SVG mit der Eigenschaft viewBox anstelle der Transform-Methode wie in gezeigt durchführen das D3-Beispiel: http://bl.ocks.org/mbostock/3680999

Wie kann ich die gleiche Skalierung/Übersetzung nur mit der viewBox erreichen? Hier ist mein Code soweit, der nicht so gut funktioniert wie die Transformationsmethode.

function zoomed(d) { 
    if (!scope.drawLine) { 
    var scale = d3.event.scale; 
    var translation = d3.event.translate; 

    //This works, but I can't use it for reason's I won't go into now 
    //mapSVG_G.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 

    var newViewBox = [ 
     initialViewBox[0] - translation[0], 
     initialViewBox[1] - translation[1], 
     initialViewBox[2]/scale, 
     initialViewBox[3]/scale 
     ]; 
     mapSVG.attr('viewBox', newViewBox); 
    } 
} 

Answer 1

ein wenig abseits, aber könnten Sie als Start dienen:

Hauptstück:

var newViewBox = [ 
    -translate[0]/scale, 
    -translate[1]/scale, 
    width/scale, 
    height/scale 
].join(" "); 

ganze Beispiel:

var width = 960, 
 
    height = 500; 
 

 
var randomX = d3.random.normal(width/2, 80), 
 
    randomY = d3.random.normal(height/2, 80); 
 

 
var data = d3.range(2000).map(function() { 
 
    return [ 
 
    randomX(), 
 
    randomY() 
 
    ]; 
 
}); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .attr("viewBox", [0, 0, width, height].join(" ")) 
 

 
var vis = svg.append("g") 
 
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom)) 
 
    .append("g"); 
 

 
vis.append("rect") 
 
    .attr("class", "overlay") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
vis.selectAll("circle") 
 
    .data(data) 
 
    .enter().append("circle") 
 
    .attr("r", 2.5) 
 
    .attr("transform", function(d) { 
 
    return "translate(" + d + ")"; 
 
    }); 
 

 
function zoom() { 
 
    var scale = d3.event.scale; 
 
    var translate = d3.event.translate; 
 

 
    var newViewBox = [ 
 
    -translate[0]/scale, 
 
    -translate[1]/scale, 
 
    width/scale, 
 
    height/scale 
 
    ].join(" "); 
 
    
 
    svg.attr('viewBox', newViewBox); 
 

 
}

.overlay { 
 
    fill: none; 
 
    pointer-events: all; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>