Hilfe wäre willkommen, den Code unten zu aktualisieren, um in Version 4 zu arbeiten. Ich habe zoom.behaviour zu d3.zoom geändert, aber ich bin nicht klar über die anderen Änderungen, die benötigt werden. Es sieht komplizierter aus als v3!d3 zoom und pan upgrade auf version 4
<!DOCTYPE html>
<html>
<head>
<!-- <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>-->
<script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
}
svg {
position: absolute;
top: 0;
left: 0;
}
p {
text-align: center;
}
</style>
</head>
<body>
<p>Use the mouse to pan (click and move)/zoom (scrollwheel)</p>
</body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.call(d3.zoom().on("zoom", function() {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g")
svg.append("circle")
.attr("cx", document.body.clientWidth/2)
.attr("cy", document.body.clientHeight/2)
.attr("r", 50)
.style("fill", "#B8DEE6")
</script>
</html>
Das ist vielen Dank. Weißt du, ob es möglich ist, nur die X-Achse zu zoomen? Zuvor habe ich zoom = d3.zoom.transform() .x (xRange) //.y(y) – user3359706
Das funktioniert in der Geige, aber in meinem SVG verwende ich Viewbox und das scheint zu brechen? – SumNeuron