Javascript d3.js-基于文本宽度的文本位置

我正在使用d3.js生成一个表示不同假设的可视化。由于假设由不同的部分组成，每个单词/部分都有自己的文本元素

我想将每个文本元素的x位置基于上一个单词的文本宽度，包括偏移量。假设“IF x THEN y”，我需要4个文本元素，其中“IF”的x=0，因为“IF”的宽度为10，而我使用的偏移量为5，“x”将得到x=15，依此类推

我使用的json数据可能如下所示：

{[
    {"id" : "id0",
    "elements" : [
      {
         "text" : "IF",
         "type" : "conditional"
      },
      {
         "text" : "X",
         "type" : "variable"
      },
      {
         "text" : "THEN",
         "type" : "conditional"},
      {
         "text" : "Y",
         "type" : "variable"
      }
    ]},
   {"id" : "id1",
    "elements" : [
      {
         "text" : "IF",
         "type" : "conditional"
      },
      {
         "text" : "abc",
         "type" : "variable"
      },
      {
         "text" : "THEN",
         "type" : "conditional"},
      {
         "text" : "xyz",
         "type" : "variable"
      }
    ]}
]}

到目前为止，我用来生成文本元素的代码（每个假设都在一个g元素中）是

 var svg = d3.select("#viewport")
            .append("svg")
            .attr("width", 1200)
            .attr("height", 800);

        var content = svg.append("g").attr("id", "drawing");

        var groups = content.selectAll().data(arr)
            .enter()
            .append("g")
            .attr("class", function (d) {
                return "hypothesis " + d["id"];
            })
            .each(function (d, i) {
                d3.select(this).selectAll("text")
                    .data(d["elements"])
                    .enter()
                    .append("text")
                    .attr("class", function (d) {
                        return d.type;
                    })
                    .text(function (d) {
                        return d.text;
                    })
                    .attr("font-family", "sans-serif")
                    .attr("font-size", "20px")
                    .attr("x", function (d, j) {
                        return j++ * 100;
                    })
                    .attr("y", 50 * (i + 1));
            });

当设置x位置时，我想得到当前文本元素的宽度，并将其推到一个变量上，这样我就可以得到下一个新的x坐标，而不是只使用每个单词100 px的当前随机偏移量

因此，问题是如何获得计算出的文本宽度（我在getBBox或类似工具上看到过一些东西，但我不知道在哪里使用它们，所以它对我不起作用）以及如何将其应用于文本元素。或者，是否有更好的方法来创建元素，可能不是一次运行

不同的元素需要以不同的颜色进行样式设置，并且必须在稍后进行鼠标操作，这就是为什么它们必须是单个文本元素的原因

提前感谢。

我总是用它来做这类事情，不过也可以：

.each(function(d, i) {
  var runningWidth = 0; //<-- keep a running total
  ...
  .attr("x", function(d, j) {
    var w = this.getComputedTextLength(), //<-- length of this node
        x = runningWidth; //<-- previous length to return
    runningWidth += w; //<-- total
    return x;
  })
  ...

。每个（函数（d，i）{
var runningWidth=0；//只构建一个字符串/文本元素不是更容易吗？
.text（返回d[“元素”][0]+“”+d[“元素”][1]+“”+d[“元素”][2]+“”+d[“元素”][3]；）
@Mark我希望有单独的文本元素，这样我可以对它们进行不同的样式设置。我需要用不同的颜色突出显示不同类型的元素，然后需要它们以不同的字体弹出。也许我应该将其添加到问题中。那么，一个
元素和多个
子元素如何？您可以进行样式设置
孩子们是分开的，他们会自动定位在一起。谢谢，这正是我要找的。但无法让它工作，因为我不知道在哪里以及如何使用
getComputedTextLength（）
。