最近、D3.jsをv3からv4にアップグレードしました。左ボタンを使用するのと同じ方法でマウスの中央ボタンを押すことで、もはやパンニングができなくなったことに気付きました。 mbostockの古いブロックと新しいブロックを比較することで、同じことが起こりそうです。中マウスボタンでd3jsパンする
Programmatic Pan+Zoom II v3~Pan & Zoom Axes v4を比較してください。コードと機能は非常に似ていますが、マウスの中央ボタンを使用すると、v3では動作しますが、もう一方では動作しません。
新しいバージョンのマウスの中央ボタンを使用してまだパンすることができるかどうかは知っていますか？
docsをzoom.filterで確認してください。ちょっと混乱しますが、これがセカンダリボタンを押さえているのです。以下のような
何か：
.filter(function(){
return (event.button === 0 ||
event.button === 1);
})
は左と真ん中のボタンでパン/ズームが可能になります。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path {
display: none;
}
.axis line {
stroke-opacity: 0.3;
shape-rendering: crispEdges;
}
.zoom {
fill: none;
pointer-events: all;
}
.view {
fill: url(#gradient);
stroke: #000;
}
</style>
<svg width="960" height="500">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0.0%" stop-color="#2c7bb6"></stop>
<stop offset="12.5%" stop-color="#00a6ca"></stop>
<stop offset="25.0%" stop-color="#00ccbc"></stop>
<stop offset="37.5%" stop-color="#90eb9d"></stop>
<stop offset="50.0%" stop-color="#ffff8c"></stop>
<stop offset="62.5%" stop-color="#f9d057"></stop>
<stop offset="75.0%" stop-color="#f29e2e"></stop>
<stop offset="87.5%" stop-color="#e76818"></stop>
<stop offset="100.0%" stop-color="#d7191c"></stop>
</linearGradient>
</defs>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var x = d3.scaleLinear()
.domain([-1, width + 1])
.range([-1, width + 1]);
var y = d3.scaleLinear()
.domain([-1, height + 1])
.range([-1, height + 1]);
var xAxis = d3.axisBottom(x)
.ticks((width + 2)/(height + 2) * 10)
.tickSize(height)
.tickPadding(8 - height);
var yAxis = d3.axisRight(y)
.ticks(10)
.tickSize(width)
.tickPadding(8 - width);
var view = svg.append("rect")
.attr("class", "view")
.attr("x", 0.5)
.attr("y", 0.5)
.attr("width", width - 1)
.attr("height", height - 1);
var gX = svg.append("g")
.attr("class", "axis axis--x")
.call(xAxis);
var gY = svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
var zoom = d3.zoom()
.scaleExtent([1, 40])
.translateExtent([
[-100, -100],
[width + 90, height + 100]
])
.on("zoom", zoomed)
.filter(function(){
return (event.button === 0 ||
event.button === 1);
})
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.call(zoom);
function zoomed() {
view.attr("transform", d3.event.transform);
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
}
</script>