javascript d3.js中“.getComputedTextLength()”的等效方法

s3fp2yjn  于 2023-04-19  发布在  Java
关注(0)|答案(3)|浏览(263)

d3中的.getComputedTextLength()方法的等价物是什么?.getComputedTextLength()作用于Dom元素,而不是d3元素的对象。

编辑(已添加图片)

qcuzuvrc

qcuzuvrc1#

D3选择实际上是对象(从D3 v4.0开始)。然而,没有方法计算对象中文本的长度,因为对象本身在DOM中不存在,因此没有长度。您只能计算DOM元素的长度(以像素为单位)。
也就是说,如果使用D3选区指向SVG元素,则可以使用getComputedTextLength()。例如,使用node()

d3.select("foo");//this is a D3 selection
d3.select("foo").node();//this is the DOM element

下面是一个demo:

var svg = d3.select("svg");
var text = svg.append("text")
	.attr("x", 10)
	.attr("y", 30)
	.text("Hello world!");
	
console.log("the text has " + d3.select("text").node().getComputedTextLength() + " px")
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
jmp7cifd

jmp7cifd2#

只需使用this访问选择操作中的DOM元素,即可从D3的批量节点处理中受益,例如

d3.selectAll('tspan.myClass')
  .each(function(d) {
    console.log(this.getComputedTextLength());
  });

d3.selectAll('tspan.myClass')
  .attr('transform', function(d) {
    var width = this.getComputedTextLength() + 2 * padding;
    return 'translate(' + width / 2 + ' 0)');
  });

this绑定到当前DOM节点。
selection.node()只返回选择中的第一个元素。
D3 4.* 开始,还有selection.nodes()可以恢复选择中的所有DOM节点,因此您可以

d3.selectAll('tspan.myClass').nodes().forEach(function(el) {
  console.log(el.getComputedTextLength());
});

虽然它的使用不如通过thisselection.attrselection.styleselection.filterselection.each等中抓取元素那么惯用,就像上面的片段一样。

t0ybt7op

t0ybt7op3#

如果我理解正确的话,OP希望在D3.js中有一个类似于getComputedTextLength的函数,而不使用D3.js。
在普通Javascript中没有这样的方法。但是,如果元素是SVG元素,则可以使用getBBox()来检索元素适合的 * 最小矩形 * 的坐标和尺寸。
如果元素不属于SVG,则使用getClientRect()getBoundingClientRect()

相关问题