Question

我使用D3 v4制作响应式条形图。我使用Mike Bostock的这个例子：Brush & Zoom

我想实现translateExtent只能在x方向翻译，但我无法弄清楚我做错了什么。当我尝试拖动它时，g元素跳转到特定位置。

我的设置代码：

margin = {top: margins.top, right: margins.right, bottom: margins.bottom, left: margins.left};
    width = size.width - margins.left - margins.right;
    height = size.height - margins.top - margins.bottom;

var svg = d3.select("#" + container).append("svg")
    .attr("class", "svgWrapper_" + container);

var cont = svg.append("g")
    .attr('class', 'mainContainer_' + container)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + .margin.bottom);

    svg.call(d3.zoom()
        .translateExtent([[0, 0],[width, height]])
        .on("zoom", function () {
            cont.attr("transform", d3.event.transform)
        }))
        .on("dblclick.zoom", null)
        .on("wheel.zoom", null);

Answer 1

我解决了测试...我没有通过正式解释得到它：d3js

但是在这里尝试它是我用来测试translateExtent的改编的jsfiddle：jsfiddle

var zoom = d3.zoom()
.translateExtent([[-300, 0], [600 , height ]])
.on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
  circle.attr("transform", d3.event.transform);
}

我仍然不知道为什么第一个jsfiddle中的translateExtent不起作用，但我已经在我的图表中实现了它并且它有效。

D3缩放translateExtent未应用

1 个答案: