Question

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

我想和this example做同样的事情但是使用非地理路径。像

这样的东西

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

文档： https://github.com/mbostock/d3/wiki/Selections#node

Answer 2

你可以打电话给＆＃34; getBBox（）＆＃34;在SVG元素上获取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/

Answer 3

如果您使用 SVG 元素（例如 <text>），您可以使用 element.node().getBBox() 否则 .getBBox() 将不起作用。对普通 html 元素使用 element.node().getBoundingClientRect()。

console.log(d3.select('text').node().getBBox())
console.log(d3.select('div').node().getBoundingClientRect())

.el {
  margin: 30px;
  width: 150px;
  height: 50px;
  background: red;
}

<script src="https://d3js.org/d3.v6.min.js"></script>

<div class="el"></div>
<svg><text>Text</text></svg>

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

3 个答案:

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