分裂文本为一些粗体和一些不在功能的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属性.

如果需要的话,我也可以选择分离出streamname和模块列表,这样也可以更容易地编写javascript.即.而不是d.name,我可能将d.streamname和d.moduleNameList作为两个单独的属性.

谢谢,迪恩

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; });