d3.behavior.zoom（）将图形移动到角落而不是中心

Question

我想在我的森伯斯特上添加一个鼠标轮变焦：
我做的是编辑了这段代码：

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width/2 + "," + height * .52 + ")")
    .call(zoom);

function zoomed() {
  svg.attr('transform', 'translate(' + d3.event.transform.x + ',' + d3.event.transform.y + ') scale(' + d3.event.scale + ')');
  //svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

问题在于，当页面加载时，一切似乎都没问题，但是当使用mouswheel滚动旭日形首饰时，左上角是：

我可以通过更改此代码来解决此问题：

function zoomed() {
  svg.attr("transform", "translate(" + width/2 + "," + height * .52 + ")scale(" + d3.event.scale + ")");
}

旭日现在停留在中间，然而这不会缩放到光标的位置，也不会让用户进一步缩小。
任何建议如何缩放到光标位置（如在第一个代码示例中），左上角没有旭日形成的损坏？

有关完整代码，请参阅JSfiddle，它在此处无效，但在本地运行它确实有效。

Answer 1

d3.event.translate返回一个数组。因此，如果您要添加这些值（width/2和height/2），则必须单独添加它们：

function zoomed() {
    svg.attr('transform', 'translate(' + (d3.event.translate[0] + width / 2) +
        ',' + (d3.event.translate[1] + height / 2) + ') scale(' + d3.event.scale + ')');
}

或者，如果您想使用原始缩放功能......

function zoomed() {
    svg.attr("transform", "translate(" + d3.event.translate +
        ")scale(" + d3.event.scale + ")");
}

...只需打破svg选择，为该组分配另一个名称：

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var foo = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")")
    .call(zoom);

Answer 2

我在Zoomed函数中使用标准的d3.event.translate和d3.event.scale，如下所示：

function zoomed() {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}

除了当我第一次滚动时整个森伯斯特跳到左上方时，一切正常。我把它拖回中间后纠正了自己，但这很烦人。

我挣扎了好几个小时。最终我通过更改svg：

上的viewBox属性解决了这个问题

.attr({viewBox: "" + (-width / 2) + " " + (-height / 2) + " " + width + " " + height})

我从这个例子中得到了一个想法：Basic Sunburst