为一些粗体和一些不在功能性 javascript 块上的文本拆分文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19137290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 14:31:09  来源:igfitidea点击:

splitting text for some bold and some not on functional javascript piece

javascriptd3.js

提问by Dean Hiller

I currently have the following code

我目前有以下代码

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

which is working fine. This code receives a string however of form

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

streamname(module<-module<-module)

and if the json node contains a lastModuleSelected=true, I want the last module only in bold, not the whole thing and if lastModuleSelected=false, I want just the streamname to be in bold not the whole thing.

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

How can I go about doing this? This is operating on many nodes of course so I am not sure how I would go about appending two text elements correctly since the string lengths vary in size....I still want one string but part of it bold and part of it normal. Is there a way to do this?

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

NOTE: the d.root, d.selected and d.name are attributes in the received json and I will add a d.lastModuleSelected attribute as well.

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

I do have the option of separating out streamname and the module list as well if necessary if that makes it easier to write the javascript as well. ie. instead of d.name, I might have d.streamname and d.moduleNameList as two separate attributes.

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

thanks, Dean

谢谢,院长

回答by Dean Hiller

Thanks to @Lars Kotthoff and his comment, I was able to get this working as such

感谢@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; });