Add html content with line break inside d3 circle

Question

Is it possible in d3 to Add html content instead of appending text.In the Following code,

 circle.append("circle")
                              .attr("cx", 65)
                              .attr("cy", 65)
                              .attr("r", 65)
                              .attr('fill','none')
                              .attr('stroke','#008080')
                              .attr('class','ourmission')
    circle.append('text')
                              .attr('x', 65)
                              .attr('y',65)
                              .attr('dx',65)
                              .text(function(d){
                              return d.Some_Value+"<br/>"+d.Some_OtherValue
                                             })

I have appended text,since I need to add line break to my text dynamically based on some condition I need html content to be added instead of text.If am not wrong I think line break is not possible with appending text.

I need to do some thing like this,

  .html(function(d){
      return d.Some_Value+"<br/>"+d.Some_OtherValue
               })

Answer 1

You can do it with <foreignObject> element.

The foreignObject SVG element allows for inclusion of a foreign XML namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.

Look at the demo below:

 var svg = d3.select("#root") .append("svg") .attr("width", 210) .attr("height", 210); svg.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 100) .attr("cx", 105) .attr("cy", 105) svg .data([{ foo: 'foo', bar: 'bar' }]) .append("foreignObject") .attr("x", 60) .attr("y", 60) .attr("width", 100) .attr("height", 100) .html(function(d) { return '<div style="border:1px solid">' + d.foo + '</br>' + d.bar + '</div>' })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script> <div id="root"></div>