Question

我正在使用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的当前随机偏移量。 / p>

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

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

提前致谢。

Answer 1

我总是使用getComputedTextLength来处理这些事情，虽然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;
  })
  ...

完整代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div id="viewport"></div>
  <script>
    var arr =
      [{
        "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"
        }]
      }];

    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) {
        var runningWidth = 0;
        
        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) {
            var w = this.getComputedTextLength(),
                x = runningWidth;
            runningWidth += w;
            return x;
          })
          .attr("y", 50 * (i + 1));
      });
  </script>
</body>

</html>

＆＃13;

d3.js - 基于文字宽度

1 个答案: