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")
3条答案
按热度按时间qcuzuvrc1#
D3选择实际上是对象(从D3 v4.0开始)。然而,没有方法计算对象中文本的长度,因为对象本身在DOM中不存在,因此没有长度。您只能计算DOM元素的长度(以像素为单位)。
也就是说,如果使用D3选区指向SVG元素,则可以使用
getComputedTextLength()
。例如,使用node()
:下面是一个demo:
jmp7cifd2#
只需使用
this
访问选择操作中的DOM元素,即可从D3
的批量节点处理中受益,例如或
this
绑定到当前DOM节点。selection.node()
只返回选择中的第一个元素。从
D3
4.* 开始,还有selection.nodes()
可以恢复选择中的所有DOM节点,因此您可以虽然它的使用不如通过
this
在selection.attr
,selection.style
,selection.filter
,selection.each
等中抓取元素那么惯用,就像上面的片段一样。t0ybt7op3#
如果我理解正确的话,OP希望在D3.js中有一个类似于
getComputedTextLength
的函数,而不使用D3.js。在普通Javascript中没有这样的方法。但是,如果元素是SVG元素,则可以使用
getBBox()
来检索元素适合的 * 最小矩形 * 的坐标和尺寸。如果元素不属于SVG,则使用
getClientRect()
或getBoundingClientRect()
。