如何获得所选内容中所有文本元素的边界框值？
[英]How can I get the bounding box values of all the text elements in a selection?
问题描述
I've got a D3 selection like this: 
我有一个这样的D3选择：
const labels = svg.selectAll('text').data(data);
labels.enter().append('text')
.attr('class', (d) => `label-${d.label}`)
.attr('x', (d) => scale.x(d.time))
.attr('y', (d) => scale.y(d.value))
.text((d) => `${d.answer}`);
Given the above code, how would I be able to get the bounding box of all text elements created? 给定上面的代码，我将如何获得所有创建的文本元素的边界框？ I'm looking to do something similar to how Mike Bostock gets the bounding box of one text element in the following code: https://bl.ocks.org/mbostock/1160929 . 我正在寻找与Mike Bostock如何在以下代码中获取一个文本元素的边界框类似的方法： https : //bl.ocks.org/mbostock/1160929 。 However, I'd like to get the bounding box values of each element, so I can create a rect element for each text element. 但是，我想获取每个元素的边界框值，因此我可以为每个文本元素创建一个rect元素。
1 个解决方案
解决方案1
1 已采纳 2017-05-07 21:57:30
I'd do it like this: 我会这样：
...
.text((d) => `${d.answer}`)
.each(function(d){
var bbox = this.getBBox();
svg.append('rect')
.attr('x', bbox.x)
.attr('y', bbox.y)
.attr('width', bbox.width)
.attr('height', bbox.height)
.style('fill', 'none')
.style('stroke', 'steelblue');
});
Running code: 运行代码：
<!DOCTYPE html> <html> <head> <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.8/chance.min.js"></script> </head> <body> <script> var w = 300, h = 300; var data = [ { x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() },{ x: Math.random() * (w - 100), y: Math.random() * h, t: chance.word() } ] var svg = d3.select('body') .append('svg') .attr('width', w) .attr('height', h); const labels = svg.selectAll('text').data(data); labels.enter() .append('text') .attr('class', (d) => `label-${dt}`) .attr('x', (d) => dx) .attr('y', (d) =>dy) .text((d) => dt) .each(function(d){ var bbox = this.getBBox(); svg.append('rect') .attr('x', bbox.x) .attr('y', bbox.y) .attr('width', bbox.width) .attr('height', bbox.height) .style('fill', 'none') .style('stroke', 'steelblue'); }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.