帮助将被赞赏更新下面的代码在版本4中工作.我已将zoom.behaviour更改为d3.zoom但我不清楚所需的其他更改.它看起来比v3复杂!
<!DOCTYPE html>
<html>
<head>
<!-- <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>-->
<script data-require="d3@4.0.0" 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 …在v3中,我使用拖动原点来防止由于鼠标位置/元素坐标偏移引起的明显跳跃.在v4中是否有替代原因功能已被删除？
var drag1 = d3.behavior.drag()
.origin(function () {
var t = d3.select(this);
return {
x: t.attr("x") + d3.transform(t.attr("transform")).translate[0],
y: t.attr("y") + d3.transform(t.attr("transform")).translate[1]
};
})
.on("drag", function (d, i) {
d3.select(this).attr("transform", function (d, i) {
return "translate(" + [d3.event.x, d3.event.y] + ")"
})
});
var drag2 = d3.behavior.drag()
.origin(function () {
var t = d3.select(this);
return { x: t.attr("x"), y: t.attr("y") };
})
.on("drag", function (d, i) {
d3.select(this)
.attr("x", d3.event.x)
.attr("y", d3.event.y);
});
d3.js ×2