D3：获取所选元素的边界框 [英] D3: get the bounding box of a selected element

问题描述

我有一个svg的几个元素，我想放大其中一个。

I have several elements in a svg and I want to zoom on one of them.

我想做同样此示例，但使用非地理路径。像

I'd like to do the same as this example but with non geo paths. Something like

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

我没有找到任何D3。

I did not find anything with D3. did I miss something?

感谢

推荐答案

getBBox（）在SVG元素上获得它们的边界框在SVG坐标。

You can call "getBBox()" on SVG elements to get their bounding box in terms of SVG coordinates.

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

一旦你有了边界框，它决定了你想如何具体地转换视图放大边界框。有很多不同的方法，所以我留给你来调查。

Once you have the bounding box, its a matter of deciding how specifically you want to actually transform the view to zoom into the bounding box. There are a bunch of different approaches so I'll leave that for you to investigate.

这篇关于D3：获取所选元素的边界框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！