放大宽度，而不是高度(一维缩放)

Question

我有一个d3图，其中我希望一个特定对象在调用缩放后保持相同的高度(因此它仍然扩展了图表的高度(，但宽度会相应地放大和缩小。

从本质上讲，我只是想让缩放水平地(x(影响它。其他项目需要保持二维缩放。

以下是整个项目：https://codepen.io/lahesty/pen/XYoyxV?editors=0001蓝色矩形就是我所说的。线路295-319

这是我的缩放功能：

function zoomed() {
svg.selectAll("path.line")
.attr("transform", d3.event.transform); 
svg.selectAll("g.anomrect")
.attr("transform", d3.event.transform);
svg.selectAll("g.dot")
.attr("transform", d3.event.transform);
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)))
gY.call(yAxis.scale(d3.event.transform.rescaleY(y)))}

调用缩放：

var zoom = d3.zoom()  
.scaleExtent([1, 40])
.on("zoom", zoomed);

我正在放大的对象：

var anamoly = svg.append('g')
.attr('clip-path', 'url(#clipper)')
.selectAll('.anomrect')
.data(anamoly_data, function(d, i) { return d[0]; 
}).enter().append("g").attr("class", "anomrect");
anamoly.selectAll('.anomrect')
.data(function(d) { return d; }, function(d_, i_) { return i_})
.enter()
.append('rect')
.attr("id", function(d,i){return id_list[i%id_list.length]})
.attr("height", height)
.attr("width", function(d) { return x(d.ended_at)-x(d.started_at); })
.attr("x", function(d) { return x(d.started_at); })
.attr("y", 0)

我应该调整物体的"高度"吗？或者我的事件在缩放功能中的转换？

谢谢

Answer 1

对于直线(实际上是路径(、矩形或圆形，仅使用d3.event.translate.x来平移x位置，还使用d3.event. translate.k来缩放x位置：

selection.attr("transform",
"translate(" + d3.event.transform.x + ",0) scale(" + d3.event.transform.k + ",1)");

因此，为了将缩放限制为仅适用于所有路径、矩形和圆形的x坐标，它将是：

function zoomed() {
svg.selectAll("path.line").attr("transform",
"translate(" + d3.event.transform.x + ",0) scale(" + d3.event.transform.k + ",1)");
svg.selectAll("g.anomrect").attr("transform",
"translate(" + d3.event.transform.x + ",0) scale(" + d3.event.transform.k + ",1)");
svg.selectAll("g.dot").attr("transform",
"translate(" + d3.event.transform.x + ",0) scale(" + d3.event.transform.k + ",1)");
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
};

注意，这里我删除了y轴调用。

正如您在问题中提到的，如果您想将缩放限制为仅一个选择，请仅更改相应的选择(并保留y轴调用(。

以下是更新后的CodePen(限制所有选择的缩放(：https://codepen.io/anon/pen/djyyPQ?editors=0011