assign different text attributes to one svg:text

[Guan-Cheng Li]

Hi,

I would like to assign different text attributes to a svg:text, such
as

vis.append("svg:text").text("<font color=red>hello</font> <font
color=blue>world</font>!!").

It won't work. I thought of appending svg:text twice. However, when it
comes to assign many attributes it becomes tedious.

Any other possibilities?

Thank you!

Guan-Cheng

[Mike Bostock]

> I thought of appending svg:text twice. However, when it comes to
> assign many attributes it becomes tedious.

I'd probably use svg:tspan elements for that, even if it is a bit tedious:

var text = svg.append("svg:text");
text.append("svg:tspan").style("fill", "red").text("hello");
text.append("svg:tspan").style("fill", "blue").text("world");

But, you do have other options. You could use an absolute-positioned
HTML overlay. Or an svg:foreignObject element:

svg.append("svg:foreignObject")
.attr("width", 200)
.attr("height", 200);
.append("div")
.html("<span style='color:red'>Hello</span> <span
style='color:blue'>world</span>!");

Mike

[Guan-Cheng Li]

Thank you so much Mike. foreignObject simply works like a charm !!! !!!

I'm so proud of using D3 !

Guan-Cheng

[Kang S. Byun]

Can you show the example code to us?

I am really interested in implementing multiple-lined text title in each node of a graph.

2011년 8월 2일 화요일 오후 3시 31분 37초 UTC+9, Guan-Cheng Li 님의 말:

[Edward KangSup BYUN]

⇐ Insert HTML code inside SVG Text element

⇒ *** WORKING: *** https://gist.github.com/mbostock/1424037===> http://localhost/MaybleAlpha/d3Tree3_ksb7dynamicDataLoad5.html

2013/5/18 Kang S. Byun <free1...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/d2ceKITfTx0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.