Javascript 在D3.Js中以矩形剪切文本

我有一个树组织，在这棵树上，我有一些rect，他们有一个

字符。这意味着在此

|

之后写入的文本必须放在rect的末尾

以下是代码（复制以查看结果）：

---

所以对于最终结果，我想要这样的东西（我们会说我想要的最终结果在报价单上，我们得到了：before->最终结果），例如：“Poste:Rang Rang 1 | Total=20 spaaaaace_the_rect”->“Poste:Rang Rang 1 spaaacceeee_on the_rect Total=20”。再次感谢你们的帮助，抱歉我的英语不好；）

由于我之前为您发布的页面创建了一个Plunkr，我在这里对相同的代码进行了更改：

相关代码更改：

更改了向节点添加逻辑的文本

nodeEnter.append("text")
  .attr("dy", 3.5)
  .attr("dx", 5.5)
  .each(function (d) {
    if(d.data.attributes.indexOf('|') > -1) {
      var beforeText = d.data.attributes.substr(0, d.data.attributes.indexOf('|')).trim(),
        afterText = d.data.attributes.substr(d.data.attributes.indexOf('|')+1, d.data.attributes.length).trim();

      d3.select(this).append('tspan').classed('beforetext', true).text(beforeText);
      var afterTextSpan = d3.select(this).append('tspan').classed('aftertext', true).text(afterText);

      // position aftertext
      var temp_text = svg_var.append('text').classed('temp_text', true).text(afterText);
      afterTextSpan.attr('x', barWidth-temp_text.node().getBBox().width+10)
      temp_text.remove();
    } else {
      d3.select(this).text(d.data.attributes); 
    }
  });

说明：

如果

d.data.attributes

不包含

|

，只需按原样设置文本即可

如果它确实包含

，则用于计算

之前和

之后的字符串（分别将它们设置为

前文本

和

后文本

）

由于您需要在不同位置使用两个文本，我建议使用

tspan

s，只需更改

x

位置（您也可以通过使用两个独立的

元素来完成此操作）

无需将

定位在文本span

之前，因为默认情况下它应该位于左侧。但是为了定位

后文本span

，我使用了一个临时文本来计算

后文本span

的宽度，并将其从条形宽度中减去以向右偏移

后文本span

矩形的一侧。（此逻辑对于较大的文本很有用）

---

顺便说一句，我使用了我在文章中提到的CSS来对齐SVG。希望这能有所帮助。

欢迎来到StackOverflow@zahreddine-不幸的是，我们需要关于您当前实现中遇到的问题的具体问题（如果可能，还需要一个可复制的示例）请考虑编辑你的问题，把重点放在你需要帮助的特定问题上。嗨，伊恩，我的问题很简单，但我没有找到如何在网络上做这件事，有人能帮我吗？你的问题是解释你想要什么。

{"attributes": "DPGF", "children": [{"attributes": "LOT:  nom 13.CVC", "children": [{"attributes": "Tous_DPGF:  Profondeur 1", "children": [{"attributes": "Poste:  Rang Rang 1 | Total = 20", "children": [{"attributes":"Debut_poste_Excel 0.0"}, {"attributes":"Fin_poste_Excel 19.0"}, {"attributes":"Mot_cle debut"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste:  Rang Rang 1 | Total = 41", "children": [{"attributes":"Debut_poste_Excel 20.0"}, {"attributes":"Fin_poste_Excel 20.0"}, {"attributes":"Mot_cle chauffage"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste:  Rang Rang 1 | Total = 45", "children": [{"attributes":"Debut_poste_Excel 21.0"}, {"attributes":"Fin_poste_Excel 23.0"}, {"attributes":"Mot_cle Préambule"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste:  Rang Rang 1 | Total = 50", "children": [{"attributes":"Debut_poste_Excel 24.0"}, {"attributes":"Fin_poste_Excel 25.0"}, {"attributes":"Mot_cle Préambule"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste:  Rang Rang 1 | Total = 54", "children": [{"attributes":"Debut_poste_Excel 26.0"}, {"attributes":"Fin_poste_Excel 27.0"}, {"attributes":"Mot_cle production thermique"}, {"attributes":"Rang Rang 1"}]}, {"attributes": "Poste:  Rang Rang 1 | Total = 94", "children": [{"attributes":"Debut_poste_Excel 28.0"}, {"attributes":"Fin_poste_Excel 65.0"}, {"attributes":"Mot_cle chauffage"}, {"attributes":"Rang Rang 1"}, {"attributes": "Tous_DPGF:  Profondeur 2", "children": [{"attributes": "Poste:  Rang Rang 2", "children": [{"attributes":"Debut_poste_Excel 31.0"}, {"attributes":"Fin_poste_Excel 65.0"}, {"attributes":"Mot_cle Échangeur"}, {"attributes":"Rang Rang 2"}, {"attributes": "Tous_DPGF:  Profondeur 3", "children": [{"attributes": "Poste:  Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 35.0"}, {"attributes":"Fin_poste_Excel 35.0"}, {"attributes":"Mot_cle Manchon"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste:  Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 36.0"}, {"attributes":"Fin_poste_Excel 36.0"}, {"attributes":"Mot_cle Vanne"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste:  Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 37.0"}, {"attributes":"Fin_poste_Excel 37.0"}, {"attributes":"Mot_cle Thermomètre"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste:  Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 38.0"}, {"attributes":"Fin_poste_Excel 38.0"}, {"attributes":"Mot_cle Sonde"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste:  Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 39.0"}, {"attributes":"Fin_poste_Excel 39.0"}, {"attributes":"Mot_cle Soupape"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste:  Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 40.0"}, {"attributes":"Fin_poste_Excel 41.0"}, {"attributes":"Mot_cle Pressostat"}, {"attributes":"Rang Rang 4"}]}, {"attributes": "Poste:  Rang Rang 4", "children": [{"attributes":"Debut_poste_Excel 42.0"}]}]}]}]}]}]}]}]}

nodeEnter.append("text")
  .attr("dy", 3.5)
  .attr("dx", 5.5)
  .each(function (d) {
    if(d.data.attributes.indexOf('|') > -1) {
      var beforeText = d.data.attributes.substr(0, d.data.attributes.indexOf('|')).trim(),
        afterText = d.data.attributes.substr(d.data.attributes.indexOf('|')+1, d.data.attributes.length).trim();

      d3.select(this).append('tspan').classed('beforetext', true).text(beforeText);
      var afterTextSpan = d3.select(this).append('tspan').classed('aftertext', true).text(afterText);

      // position aftertext
      var temp_text = svg_var.append('text').classed('temp_text', true).text(afterText);
      afterTextSpan.attr('x', barWidth-temp_text.node().getBBox().width+10)
      temp_text.remove();
    } else {
      d3.select(this).text(d.data.attributes); 
    }
  });