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

放大宽度而不是高度（一维缩放）

1 个答案: