javascript - d3.behavior.zoom() 将图形移动到 Angular 落而不是中心

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

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

我能够通过更改此代码来解决此问题:

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);