CODEWITHSUNDEEP
javascriptjqueryhtmld3.js
random_user_name
random_user_name

Reputation: 26160

d3 js line breaks not working in text using html

Why doesn't the break tag render?

I've read several answers on SO, and tried a variety of different approaches, with no luck.

This fiddle shows the current fully functioning d3.js sample, with the problem of break tag not rendering:

http://jsfiddle.net/Xsnqx/1/

The relevant bit of code is here:

node.insert("text")
    .attr("class", "text")
    .style("text-anchor", "middle")
    .html(function(d) { 
        var html = d.name.split(" ");
        return html.join("<br>");
    });

Note: if any of you d3 experts have additional comments / observations about the code I've constructed, please let me know. When I'm done, I want this code to be first-class.

Upvotes: 1

Views: 2985

Answers (2)

random_user_name
random_user_name

Reputation: 26160

Just for completeness sake, I wanted to post the eventual d3 / js code that I ended up using to generate the XML (per @ScottCameron answer):

node.append("foreignObject")
    .attr("class", "label")
    .attr("width", "120")
    .attr("height", "120")
    .attr("transform", "translate(-60,-60)")
    .html(function(d) { 
        var html = d.name.split(" ");
        return html.join("<br>");
    });

Upvotes: 1

Scott Cameron
Scott Cameron

Reputation: 5323

You can't put HTML directly into SVG. You need to use the foreignObject element to embed HTML. Here's another question that addresses this: Auto line-wrapping in SVG text.

Upvotes: 1

Related Questions