等效方法＆＃34; .getComputedTextLength（）＆＃34;在d3.js

Question

.getComputedTextLength()中d3方法的等价物。 .getComputedTextLength()适用于Dom元素而不是d3元素的对象 修改（已添加图片）

Answer 1

事实上，D3选择是对象（自D3 v4.0起）。但是，没有用于计算对象中文本长度的方法，因为对象本身不存在于DOM中，因此没有长度。您只能计算DOM元素的长度（以像素为单位）。

话虽如此，如果您使用该选择指向SVG元素，则可以将getComputedTextLength()与D3选择一起使用。例如，使用node()：

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

这是一个演示：

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>

Answer 2

只需使用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是bound to the current DOM node。

selection.node() only returns选择中的第一个元素。

从D3开始4. *还有selection.nodes()在选择中恢复all DOM nodes，所以你可以

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

虽然使用this，selection.attr，selection.style，selection.filter等selection.each来抓取元素，但在上面的代码段中使用它不那么惯用它