javascript - 拆分一些粗体文本和一些不在功能性 javascript 片段上的文本

Question

我目前有以下代码

var temp = node.append("text")
.attr("dx", function(d) { return -8; })
.attr("dy", -4)
.style("text-anchor", function(d) { return d.root ? "start" : "end"; })
.style("font-size", function(d) { return d.selected ? "16px" : "10px"; })
.style("font-weight", function(d) { return d.selected ? "bold" : ""; })
.text(function(d) { return d.name; });

工作正常。此代码接收一个字符串，但是形式为

streamname(module<-module<-module)

如果 json 节点包含 lastModuleSelected=true，我只希望最后一个模块以粗体显示，而不是整个模块；如果 lastModuleSelected=false，我只希望流名称以粗体显示，而不是整个模块。

我该怎么做呢？这当然在许多节点上运行，所以我不确定我将如何正确地附加两个文本元素，因为字符串长度大小不同......我仍然想要一个字符串，但它的一部分是粗体，一部分是正常的。有办法做到这一点吗？

注意:d.root、d.selected 和 d.name 是接收到的 json 中的属性，我还将添加一个 d.lastModuleSelected 属性。

如果必要的话，我确实可以选择将流名称和模块列表分开，如果这样也可以更轻松地编写 javascript。 IE。我可能将 d.streamname 和 d.moduleNameList 作为两个单独的属性而不是 d.name。

谢谢， 院长

Answer 1

多亏了@Lars Kotthoff 和他的评论，我才能够像这样工作

  var text = node.append("text")
  .attr("dx", function(d) { return -8; })
  .attr("dy", -4)
  .style("text-anchor", function(d) { return d.root ? "start" : "end"; });

 text.append("tspan")
 .style("font-size", function(d) { return d.selected && !d.isLastModule ? "16px" : "10px"; })
 .style("font-weight", function(d) { return d.selected && !d.isLastModule ? "bold" : ""; })
 .text(function(d) { return d.name; });

 text.append("tspan")
.style("font-size", function(d) { return d.selected && d.isLastModule ? "16px" : "10px"; })
.style("font-weight", function(d) { return d.selected && d.isLastModule ? "bold" : ""; })
.text(function(d) { return d.moduleList; });