使用 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 轴缩放，则可以传递额外的 arg 来缩放 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>| 归档时间： |
|
| 查看次数： |
891 次 |
| 最近记录： |