使用 D3 / SVG 向矩形元素添加文本答案

【问题标题】：Adding text to rectangle elements using D3 / SVG使用 D3 / SVG 向矩形元素添加文本
【发布时间】：2019-05-26 01:42:16
【问题描述】：

我正在加载一个如下所示的外部 SVG 文件，并且需要将文本添加到我可以引用和操作的每个矩形。为此，我知道我需要将每个矩形放入一个组中，并将文本元素插入同一组中。如果可能的话，我想通过代码来做到这一点，因为更改 SVG 文件的结构将花费很长时间，因为可能会有 100 个矩形。

实现这一目标的最佳方法是什么？我确实浏览了其他一些问题，但找不到我需要的答案。

目前我可以假设的最好情况是我需要选择所有矩形并附加组，或者循环遍历并单独选择每个矩形？

地板.svg

    <rect id="SR001" x="288.62" y="220.7" class="st10" width="25.74" height="46.08"/>
<rect id="SR002" x="288.62" y="266.7" class="st10" width="25.74" height="46.08"/>
<rect id="SR003" x="288.62" y="312.49" class="st10" width="25.74" height="46.08"/>
<rect id="SR004" x="288.62" y="375.62" class="st10" width="25.74" height="46.08"/>
<rect id="SR005" x="288.62" y="421.7" class="st10" width="25.74" height="46.08"/>
<rect id="SR006" x="288.62" y="467.49" class="st10" width="25.74" height="46.08"/>
<rect id="SR007" x="288.62" y="513.62" class="st10" width="25.74" height="46.08"/>

这就是 SVG 文件的加载方式，看起来工作正常。我还有其他功能可以让我在某些鼠标事件等上与矩形进行交互。

javascript

d3.xml("floor.svg", function(xml) {
  document.body.appendChild(xml.documentElement);});

【问题讨论】：

文本的数据结构是什么样的，如何加载数据，如何将文本与矩形匹配？
这项工作仍在进行中。我试图首先克服获取文本的最初挑战。文本很可能来自外部 CSV 文档。 CSV 中的行标题将匹配已创建的组，“SR001”等。我希望使用 CSV 中相应列的数据更新显示的文本应该非常简单。当我到达那个阶段时可能会回来寻求更多帮助:)

标签： javascript d3.js svg

【解决方案1】：

我采取的方法是首先从矩形中提取数据，然后删除所有矩形，然后以您想要的结构重新创建它。要提取，您可以使用selection.each(callback)。内部回调 this 指向元素，因此您可以通过 d3.select(this).attr('x') 获取其 x 属性

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <svg>
    <rect id="SR001" x="288.62" y="220.7" class="st10" width="25.74" height="46.08"/>
		<rect id="SR002" x="288.62" y="266.7" class="st10" width="25.74" height="46.08"/>
		<rect id="SR003" x="288.62" y="312.49" class="st10" width="25.74" height="46.08"/>
		<rect id="SR004" x="288.62" y="375.62" class="st10" width="25.74" height="46.08"/>
		<rect id="SR005" x="288.62" y="421.7" class="st10" width="25.74" height="46.08"/>
		<rect id="SR006" x="288.62" y="467.49" class="st10" width="25.74" height="46.08"/>
		<rect id="SR007" x="288.62" y="513.62" class="st10" width="25.74" height="46.08"/>
  </svg>
  <script>
    var rectData = [];
    var svg = d3.select("svg")
      .attr('width', 600)
      .attr('height', 600);
    svg.selectAll("rect")
      .each(function() {
        var r = d3.select(this);
        rectData.push({
          id: r.attr('id'),
          x: r.attr('x'),
          y: r.attr('y'),
          class: r.attr('class'),
          width: r.attr('width'),
          height: r.attr('height')
        });
      }).remove();

    var g = svg.selectAll('g')
      .data(rectData)
      .enter()
      .append('g')
      .attr('id', function(d) {
        return d.id;
      });

    g.append('rect')
      .attr('class', function(d) {
        return d.class;
      })
      .attr('x', function(d) {
        return d.x;
      })
      .attr('y', function(d) {
        return d.y;
      })
      .attr('width', function(d) {
        return d.width;
      })
      .attr('height', function(d) {
        return d.height;
      });

    g.append('text')
      .attr('y', function(d) {
        return d.y;
      })
      .attr('x', function(d) {
        return d.x;
      })
      .text(function(d) {
        return d.id;
      })
  </script>
</body>

【讨论】：

谢谢！我是否认为上述内容仅适用于在线 SVG 而不是从外部文件加载时？理想情况下，我仍然想从外部文件加载（由于它的大小），但是我已经遇到了这种方法的一些问题。
我的意思是内联 svg 或在运行时使用 appendChild 或 d3.append 将其添加到 dom 之间没有区别。请注意在保证加载 svg 后调用它，例如在回调中