如何使用 d3.js selection.text() 方法添加答案

【问题标题】：How to add   using d3.js selection.text() method如何使用 d3.js selection.text() 方法添加
【发布时间】：2012-10-04 16:12:01
【问题描述】：

selection.text('&nbsp;') 似乎转换了特殊字符，因此它呈现实际文本，而不是我想要的空格。有没有办法防止选择上的text() 方法为我转义？对于上下文，这是一个表格单元格，对于选择中的某些元素是空的，我需要其中的空间以便单元格正确呈现。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

d3_selectionPrototype.text = function(value) {
    return arguments.length < 1 ? this.node().textContent : this.each(typeof value === "function" ? function() {
      var v = value.apply(this, arguments);
      this.textContent = v == null ? "" : v;
    } : value == null ? function() {
      this.textContent = "";
    } : function() {
      this.textContent = value;
    });
  };

这里重要的一点是，在选择上调用 .text() 将在每个元素上设置 textContent 属性。所以在你的情况下正确的做法是使用

selection.text(' ');

因此，如果您想使用空格，那么您只需在文本中使用空格，而不是 html 编码的空格。如果要使用 html 编码的字符，则必须将内容视为 innerHTML。

selection.html('&nbsp;');

【讨论】：

【解决方案2】：

使用 JavaScript Unicode 转义而不是 HTML 实体。 HTML 中的&nbsp; 表示 Unicode 字符 U+00A0 所以

selection.text('\u00A0')

应该做你想做的。

【讨论】：

使用 selection.text('\u00A0') 而不是 selection.text(' ') 对于需要填充实际空间的许多用途来说很重要；前者有一个有限的边界框，后者没有。
@mike 这取决于。如果您在 HTML 文件中有内联 JavaScript 片段，那么实体可能可以工作，因为 JavaScript 引擎会看到实体的扩展而不是实体本身，但如果您在自己的文件中有 JavaScript然后selection.text('&nbsp;') 会将文本设置为与符号、nbsp、分号。
如果您想采用@IanRoberts 的建议，您可能还想尝试不同的 Unicode 空白字符；例如，我发现 \u2007\u2007 产生了我需要的字符范围的空白。