score:0

All of your javaScript code creates SVG elements, not HTML. D3 will simply render everything you give the <text> block as text rather than render it as HTML somehow and then convert to SVG.

I would suggest simply adding a color property to your JSON object. You could then change your rendering code to:

nodeEnter.append('text')
    .attr('fill', function(d) { return d.color; })
    // the rest of your rendering

score:1

It depends how much data you're working with, and whether you are able to go back through it all and clean it up manually. The cleanest solution would be as Justin Niessner mentioned, to remove the html markup from the json file, and add a color property to each entry:

{
   "name":"Business Direction IM RM",
   "children":[
      {
         "name": "Sean /Bur/XYZ",
         "color": "red",
         "children":[

         ]
      },
      {
         "name": "Vijay /Fish/XYZ",
         "color": "red",
         "children":[

         ]
      }
   ]
}

If you aren't able to edit the data directly, or there is too much of it to edit manually, you could use regular expressions to get the parts of the string that you want to use.

var name_regexp = /.*?\<.*?\>(.*?)\<.*?\>/;
var color_regexp = /.*?color\=\"(.*?)\".*/;

then when you draw your text element you would write:

nodeEnter.append("text")
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { 
      return d.children || d._children ? "end" : "start";
  })
  // USE THE REGEXPs HERE
  .attr('fill', function(d) {
      return d.name.replace(color_regexp, '$1');
  })
  .text(function(d) {
      return d.name.replace(name_regexp, '$1');
  })
  .style("fill-opacity", 1e-6);

Check out this fiddle to see what those regular expressions are doing.


Related Query