バージョン4で動作するように、以下のコードを更新していただければ幸いです。zoom.behaviourをd3.zoomに変更しましたが、必要な変更についてはっきりしていません。それはv3より複雑に見える!d3ズームとパンのバージョン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>
ですまことにありがとうございます。 x軸だけをズームすることが可能かどうか知っていますか?以前はズーム= d3.zoom.transform().x(xRange) //.y(y) – user3359706
を使っていましたが、私のSVGではビューボックスを使用していますが、それは壊れそうですか? – SumNeuron