D3:获取所选元素的边界框

Question

我在svg中有几个元素,我想放大其中一个.

我想和这个例子做同样的事情但是使用非地理路径.就像是

d3.select(myElement).bounds() that I can use to pan and zoom my svg

D3没有找到任何东西.我错过了什么？

谢谢

Answer 1

对原始问题的回答以及隐含的一般观点是,D3具有访问底层DOM节点的功能,并且不,它不会在没有必要的情况下覆盖那些函数:

d3有一个函数".node()",它返回d3选择中第一项的底层DOM节点:

d3.select("#usefulSelector").node().getBBox();

特别为你:

d3.select(myElement).node().getBBox()

docs:https: //github.com/mbostock/d3/wiki/Selections#node

Answer 2

您可以对 SVG 元素调用“getBBox()”，以获取其 SVG 坐标的边界框。

var mousemove = function(d){
    var bbox = this.getBBox();
    ...
};

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

var gPath = svg.append("g");


gPath.append("path")
    .attr("d", "M 250 10 L 320 10 L 350 50 L 290 65 z")
    .attr("fill", "steelblue")
    .on("mousemove", mousemove);

有了边界框后，就需要决定实际变换视图以放大到边界框的具体程度。有很多不同的方法，所以我将其留给您研究。

这是一个 jsFiddle：http://jsfiddle.net/reblace/3rDPC/3/