D3 round package: html in text attribute

Question

In the code below, what works fine is that I can output a text string to bubbles.

But how to output HTML markup to a bubble text label? You can see my HTML markup in the first attribute "name".

This div is very simple in this example, but in the end it will contain more markup and class id for css

<script> $(document).ready(function () { var json = { "name": "flare", "children": [ { "name": "<div>test1<br>test again</div>", "size": 20, "color": "#ff0000" , "id": 1}, { "name": "test2", "size": 40, "color": "#ffff00", "id": 2}, { "name": "test3", "size": 60, "color": "#ff0000", "id": 3}, { "name": "test4", "size": 80, "color": "#ff00ff", "id": 4 }, { "name": "test5", "size": 100, "color": "#0000ff", "id": 5} ] }; var r = 400, format = d3.format(",d"), fill = d3.scale.category20c(); var bubble = d3.layout.pack() .sort(null) .size([r, r]) .padding(1.5); var vis = d3.select("#chart").append("svg") .attr("width", r) .attr("height", r) .attr("class", "bubble"); var node = vis.selectAll("g.node") .data(bubble.nodes(classes(json)) .filter(function (d) { return !d.children; })) .enter().append("g") .attr("class", "node") .attr("transform", function (d) { return "translate(" + dx + "," + dy + ")"; }); node.append("circle") .attr("r", function (d) { return dr; }) .style("fill", function (d) { return d.color; }) .on("click", function (d) { alert("id: " + d.id); }); node.append("text") .attr("text-anchor", "middle") .attr("dy", "0.3em") .text(function (d) { return d.dispText.substring(0, dr / 3); }); function classes(root) { var classes = []; function recurse(name, node) { if (node.children) node.children.forEach(function (child) { recurse(node.name, child); }); else classes.push({ packageName: name, dispText: node.name, value: node.size, color: node.color, id: node.id}); } recurse(null, root); return { children: classes }; } }); </script> 

Answer 1

You need a foreignObject tag that allows you to embed HTML (or other XML namespaces). Mike Bostock has a good example of using this here: http://bl.ocks.org/mbostock/1424037

In your case, it might look like (untested):

 node.append("foreignObject") // I believe w/h are required, though the size is arbitrary .attr("width", 200) .attr("height", 50) .append("xhtml:body") .html(function (d) { return d.dispText.substring(0, dr / 3); });