Javascript D3版本4的水平缩放？

对于D3版本4，如何将缩放限制为仅限于x轴

无限制缩放的示例：

var边长=190；
风险值数据=[
[0, 0],
[0.5, 0.8],
[1, 0.4]
];
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，边长）
.attr（“高度”，边长）；
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（功能（d）{
返回xScale（d[0]）；
})
.y（功能（d）{
返回yScale（d[1]）；
});
调用（zoomBehavior）；
graphGroup.selectAll（“路径”）.remove（）；
graphGroup.append（“路径”）
.基准（数据）
.attr（“类”、“行”）
.attr（“d”，行）

D3变焦
我不知道“仅将缩放限制为x轴”到底在寻找什么，但如果您的意思是希望在缩放时y轴保持不变（从而使形状扭曲），则可以手动构建变换函数

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

d3.event.transform.toString
将为您提供如下字符串：

translate（x，y）scale（k）
如果您熟悉转换，那么您已经知道如何进行所需的转换。但仅供参考原始转换的两部分是：

平移（x，y）
：您认为缩放发生在鼠标指向的点上的原因。它实际上移动了对象，所以如果移除此部分，画布将围绕中心缩放

缩放（k）
缩放画布

诀窍是，如果希望y轴不缩放，可以传递额外的参数来缩放y轴

因此，如果您只希望y轴保持不变（不缩放和不平移），您可能需要：


var边长=190；
风险值数据=[
[0, 0],
[0.5, 0.8],
[1, 0.4]
];
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，边长）
.attr（“高度”，边长）；
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）比例（'+transform.k++'，1'）；
attr（“transform”，transformString）；
};
var zoomBehavior=d3.zoom（）.on（“zoom”，onZoom）；
var line=d3.line（）
.x（功能（d）{
返回xScale（d[0]）；
})
.y（功能（d）{
返回yScale（d[1]）；
});
调用（zoomBehavior）；
graphGroup.selectAll（“路径”）.remove（）；
graphGroup.append（“路径”）
.基准（数据）
.attr（“类”、“行”）
.attr（“d”，行）

D3变焦
您知道如何防止图形组上的失真吗？外观内的线条bad@TomRoggero什么意思？如果不同时缩放x和y，形状纵横比将发生变化。