水平变焦与D3版本4

Horizontal zoom with D3 version 4?

本文关键字：版本 D3 变焦 水平      更新时间：2023-09-26

与D3版本4，我如何限制缩放到只是x轴?

无限制缩放示例:

var sideLength = 190;
var data = [
  [0, 0],
  [0.5, 0.8],
  [1, 0.4]
];
var svg = d3.select("body")
  .append("svg")
  .attr("width", sideLength)
  .attr("height", sideLength);
var yScale = d3.scaleLinear().range([sideLength, 0]);
var xScale = d3.scaleLinear().range([0, sideLength]);
var graphGroup = svg.append("g");
var onZoom = function() {
  graphGroup.attr("transform", d3.event.transform);
};
var zoomBehavior = d3.zoom().on("zoom", onZoom);
var line = d3.line()
  .x(function(d) {
    return xScale(d[0]);
  })
  .y(function(d) {
    return yScale(d[1]);
  });
svg.call(zoomBehavior);
graphGroup.selectAll("path").remove();
graphGroup.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3 Zoom</title>
</head>
<body>
  <script src="http://d3js.org/d3.v4.min.js"></script>
</body>
</html>

我不知道你到底在寻找什么"限制缩放到x轴"，但如果你的意思是你想要y轴在缩放时保持不变(因此你的形状被扭曲)，你可以手动构建转换函数。

d3.event.transform有3个属性x、y和k，分别是缩放点坐标和尺度坐标。

d3.event.transform.toString将给出如下字符串:

translate(x, y) scale(k)，如果您熟悉转换，您已经知道如何进行所需的转换。但仅供参考，原始转换的两个部分是:

translate(x, y):你认为缩放发生在点鼠标指向的原因。它实际上是在移动对象如果你移除这部分，画布会按中心缩放

scale(k)缩放画布。

技巧是如果你不希望y轴缩放，你可以传递额外的参数来缩放y轴。

所以如果你只想保持y轴不变(不缩放也不平移)你可以使用:

var sideLength = 190;
var data = [
  [0, 0],
  [0.5, 0.8],
  [1, 0.4]
];
var svg = d3.select("body")
  .append("svg")
  .attr("width", sideLength)
  .attr("height", sideLength);
var yScale = d3.scaleLinear().range([sideLength, 0]);
var xScale = d3.scaleLinear().range([0, sideLength]);
var graphGroup = svg.append("g");
var onZoom = function() {
var transform = d3.event.transform;
  var transformString = 'translate(' + transform.x + ',' + '0) scale(' + transform.k + ',1)';
  graphGroup.attr("transform", transformString);
};
var zoomBehavior = d3.zoom().on("zoom", onZoom);
var line = d3.line()
  .x(function(d) {
    return xScale(d[0]);
  })
  .y(function(d) {
    return yScale(d[1]);
  });
svg.call(zoomBehavior);
graphGroup.selectAll("path").remove();
graphGroup.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3 Zoom</title>
</head>
<body>
  <script src="http://d3js.org/d3.v4.min.js"></script>
</body>
</html>

相关文章：