Question

对于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>

Answer 1

我不知道你正在寻找什么＆＃34;限制缩放到x轴＆＃34;但如果你的意思是你希望y轴在缩放时保持不变（因此你的形状会变形），你可以手动建立变换函数。

d3.event.transform有3个属性x，y和k，它们是缩放点和缩放的坐标。

d3.event.transform.toString会给你一个如下字符串：

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

translate(x, y)：缩小缩放的原因发生在鼠标指向的位置。它实际上会移动对象，因此如果删除此部分，画布将围绕中心缩放。

scale(k)缩放画布。

技巧是如果你想让y轴不缩放，你可以将额外的arg传递给y轴。

因此，如果您只是希望y轴不受影响（未缩放且未翻译），您可能会：

＆＃13;

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);

＆＃13;

<!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>

＆＃13;

D3版本4的水平变焦？

1 个答案: