我有 x 轴的缩放和平移功能,但我想为 y 轴添加平移功能。我尝试使用 d3.behavior.zoom
和 d3.event.translate[1]
来获取 y 平移值并使用它,但是当缩放发生时平移值会发生变化,而单击拖动确实会平移 y 轴,缩放也会平移 y 轴(以一种非直观的方式)。
我还尝试使用两个 d3.behavior.zoom
实例,一个用于 x 轴,一个用于 y 轴,但只有最后添加的一个在缩放事件中被调用。
这是一个适用于在 x 方向缩放和平移的示例,我也想添加 y 平移(但不是 y 缩放):
var x = d3.scale.linear()
.domain([0, 800])
.range([0, 800]);
var y = d3.scale.linear()
.domain([0, 800])
.range([0, 800]);
var rectangleSelector = d3.select('svg')
.append('g')
.selectAll('rect')
.data([[0, 0], [50, 50], [100, 100]])
.enter()
.append('rect')
.attr('fill', 'black')
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1]))
.attr('width', d => x(d[0] + 40) - x(d[0]))
.attr('height', d => y(40));
d3.select('svg')
.call(d3.behavior.zoom().x(x).on('zoom', () => {
rectangleSelector
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1]))
.attr('width', d => x(d[0] + 40) - x(d[0]))
.attr('height', d => y(40));
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>
在此示例中,我尝试使用 d3.event.translate[1]
中的 y 值,它适用于拖动,但不良行为是根据用户鼠标缩放的位置也会发生变化y 轴的平移值。
var x = d3.scale.linear()
.domain([0, 800])
.range([0, 800]);
var y = d3.scale.linear()
.domain([0, 800])
.range([0, 800]);
var rectangleSelector = d3.select('svg')
.append('g')
.selectAll('rect')
.data([[0, 0], [50, 50], [100, 100]])
.enter()
.append('rect')
.attr('fill', 'black')
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1]))
.attr('width', d => x(d[0] + 40) - x(d[0]))
.attr('height', d => y(40));
d3.select('svg')
.call(d3.behavior.zoom().x(x).on('zoom', () => {
var translateY = d3.event.translate[1];
rectangleSelector
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1] + translateY))
.attr('width', d => x(d[0] + 40) - x(d[0]))
.attr('height', d => y(40));
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>
最佳答案
JSFIDDLE:https://jsfiddle.net/sladav/o8vaecyn/
对于初学者来说,缩放行为处理 x 轴的平移和缩放,这由...处理
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([1, 10])
.on("zoom", zoomed);
所以我们将使用缩放来处理 x 轴的东西。
对于 Y 轴,只是平移行为...
创建一个单独的拖动行为来捕获“dy”、移动 y 域并重新应用它。
添加拖动行为
var drag = d3.behavior.drag() .on("drag", dragging)
让 y 尺度的域可变(我们将在拖动时修改它)
var yPan = 0; var yMin = (-height / 2); var yMax = (height / 2); var y = d3.scale.linear() .domain([yMin, yMax]) .range([height, 0]);
添加一个函数以在拖动事件时重新缩放 Y 轴
function dragging(d) { yPan = d3.event.dy; yMin += yPan; yMax += yPan; y.domain([yMin, yMax]) d3.select(".y.axis").call(yAxis)};
从您的 SVG 元素调用拖动功能
var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(zoom) .call(drag);
关于javascript - D3 : Is it possible to zoom+pan one axis and only pan the other?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35215202/