Question

我试图在创建它之后改变D3中整个帧的宽度，具体取决于它内部某些文本的宽度（这样它就不会被切断）。但是，我无法返回文本元素的宽度。

身体看起来像这样：

this.body = d3.select("#" + this.placeholderName)
  .append("svg:svg")
  .attr("class", "gauge")
  .attr("width", this.config.size)
  .attr("height", this.config.size + 150);

正文中的文字如下：

this.body.append("svg:text")
  .attr("x", this.config.cx - 60)
  .attr("y", this.config.cy / 2 + fontSize / 2)
  .attr("dy", fontSize / 2)
  .attr("text-anchor", "start")
  .text(this.config.label)
  .style("font-size", fontSize + "px")
  .style("fill", "#333")
  .style("stroke-width", "0px")

最后，我用这个改变了框架的宽度。我需要把它作为第二个参数放在这里？

this.body.attr("width", <WIDTH OF TEXT ABOVE>);

由于

Answer 1

你试过这个：

 this.body.append("svg:text").attr("id","textValue")

和

var w=d3.select("#textValue").attr("width");

现在

this.body.attr("width", w);

我认为它应该有用。

Answer 2

首先，在创建文本元素时，为其指定一个类或ID，以便稍后轻松选择。

让我们说你给它.attr('class', 'bodyText')。

然后你可以使用SVGTextContentElement.getComputedTextLength()

来获取它的长度

您可以使用selection.node()从d3选择中获取实际文本元素，然后在节点上调用该方法，从而为文本节点获取此值。像这样：

var textLength = d3.select('.bodyText').node().getComputedTextLength();

然后，您可以在设置width属性时使用此值。

D3根据对象的子项更改对象的width属性

2 个答案: