如何使用内联tspan子项追加文本元素？

Question

从已包含类似内容的DOM开始

<svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">

</svg>

...我想以编程方式修改元素,d3.select("#svg0")以便最终得到

<svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="20" y="20">
Lorem ipsum 
<tspan style="alignment-baseline:text-before-edge">dolor</tspan>
sit amet</text>
</svg>

这是我能得到的:

var $svg = d3.select("#svg0");
$svg.append("text").text("Lorem ipsum ")
                   .attr({x:"20", y:"20"});

看起来好像其余应该很容易,但我花了最后两个小时尝试所有"明显"的事情来完成这个没有成功.¹

完成上述任务需要做什么？

_{¹我尝试了很多东西来描述它们.我只想说,该text 方法作为一个setter使用时,打掉无论textContent该text 对象有过.这意味着,实际上,这种方法只能被调用一次,这就排除了依赖于.text(...)第二次调用添加"sit amet"片段的解决方案.)}

Answer 1

通常你会想到使用这个html函数,但是从文档:

注意:顾名思义,selection.html仅支持HTML元素.SVG元素和其他非HTML元素不支持innerHTML属性,因此与selection.html不兼容.考虑使用XMLSerializer将DOM子树转换为文本.另请参阅innersvg polyfill,它提供了一个shim来支持SVG元素的innerHTML属性.

这是与polyfill:http://jsfiddle.net/GNGF5/

如果你不想这样做,你可以使用tspanw/a中的多个元素来破解它transform,如下所示:http://jsfiddle.net/cAuCM/

var $svg = d3.select("#svg0");
var $text = $svg.append("text");
var $tspan1 = $text.append('tspan');
var $tspan2 = $text.append('tspan');
var $tspan3 = $text.append('tspan');

$text.attr('transform', 'translate(0, 18)');
$tspan1.text('Lorem ipsum');
$tspan2.text('dolor').style('alignment-baseline', 'text-before-edge');
$tspan3.text('sit amet');