d3.js - splitting text for some bold and some not on functional javascript piece - Stack Overflow

admin管理员组

文章数量:1279055

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.

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.

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.

thanks, Dean

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.

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.

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.

thanks, Dean

• javascript
• d3.js

Share Improve this question Follow edited Oct 2, 2013 at 13:43 Dean Hiller asked Oct 2, 2013 at 12:48 Dean HillerDean Hiller 20.2k3131 gold badges146146 silver badges228228 bronze badges 5

• 1 Is that d3.js? Then please tag your question with it. – Bergi Commented Oct 2, 2013 at 12:53
• 1 You would need to append several tspan elements to your text element to get bold and normal text, see svgbasics./font_effects_bold.html – Lars Kotthoff Commented Oct 2, 2013 at 13:46
• That would make sense but I must have something just slight off. Does this look right to you... var text = svg.selectAll(".node:text"); text.append("tspan") .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; }); – Dean Hiller Commented Oct 2, 2013 at 15:08
• ps. the above ment is just step 1 as I am trying to get this to work correctly and then can divide into better code, but tspan sounds like exactly what I want – Dean Hiller Commented Oct 2, 2013 at 15:09
• I think I worked it out actually. – Dean Hiller Commented Oct 2, 2013 at 15:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

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

本文标签： d3jssplitting text for some bold and some not on functional javascript pieceStack Overflow