d3.behavior.zoom() 将图形移动到角落而不是中心答案

【问题标题】：d3.behavior.zoom() moves graph to corner instead of centerd3.behavior.zoom() 将图形移动到角落而不是中心
【发布时间】：2017-06-11 15:17:57
【问题描述】：

我想为我的旭日形添加鼠标滚轮缩放：
我所做的是我编辑了这段代码：

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 + ")");
}

问题是，当页面加载时，一切似乎都正常，但是当使用鼠标滚轮滚动时，旭日形图案最终出现在左上角：

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

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

旭日形现在停留在中间，然而这不会缩放到光标所在的位置，也不允许用户进一步缩小。
有什么建议我可以缩放到光标位置（如第一个代码示例中所示）而不会使左上角的旭日形消失？

完整代码见JSfiddle，这里不工作，但是在本地运行它工作。

【问题讨论】：

标签： javascript d3.js graph sunburst-diagram

【解决方案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);

【讨论】：

我尝试将“缩放”功能替换为您提供的功能，但仍然无法进一步缩小？
这是另一个问题。我在这里只解决居中问题。请每个问题保留一个问题。
我在我的问题中解决了这个问题：“这不会缩放到光标所在的位置，也不会允许用户进一步缩小。”为了清楚起见，我应该将其添加到最后一行。我会编辑它。您还能在回答中解决这个问题吗？
我知道你在你的问题中问过这个问题，这正是我在这里所说的：每个问题只问 一个问题。我只回答中心问题。如果你想提高缩小范围，只需.scaleExtent([0.1, 10])。

【解决方案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

【讨论】：