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

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)

我应该调整对象的“高度”吗？或者我的缩放功能中的 event.transform？

谢谢

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