<svg>
<text id="test" x="0" y="15"></text>
</svg>
,
d3.select("#test").text("aaa");
或者
document.getElementById("test").textContent("aaa");
工作正常。但我需要为文本添加样式。现在：
d3.select("#test").text('aaa <tspan style="font-weight:bold">bbb</tspan> ccc');
不幸的是不起作用，因为参数被视为纯字符串。这个问题的最佳跨浏览器解决方案是什么？
主要问题是 SVG 元素上没有innerHTML属性，您需要自己创建所有子节点。但是您可以通过仅使用此字符串创建一个临时 DOM 对象，将您的 HTML 字符串转换为样式化tspan的 s（没有）字符串解析魔法。之后，您可以使用 d3 创建正确的 tspans 元素。
var text = d3.select("#test"), tmp = document.createElement("text"); //create tmp
tmp.innerHTML = 'aaa <tspan style="font-weight:bold">bbb</tspan> ccc' //create HTML children (not yet an SVG!)
var nodes = Array.prototype.slice.call(tmp.childNodes) //create a real array from the childNodes variable
nodes.forEach( function(node) {
text.append("tspan")
.attr("style", node.getAttribute && node.getAttribute("style"))
.text(node.textContent)
})
剩余问题：此解决方案不支持 tspan 中的子节点，这需要遍历源childNodes元素的tspans（或其他标签）。这最终将导致一个子 tspan 兼容的解析器完全解决这个问题。styleappendtspan
编辑：有一个更通用的innerSVG 垫片，也可以处理子节点。
还有一些其他解决方案应该可以工作，但目前已被破坏。正如其他人已经指出的那样，.html()直接在 jQuery 或 d3 中使用是行不通的，因为它们依赖于innerHTML.
//not working
$("#test").html(...); d3.select("#test").html(...)
通过 jQuery 复制和附加（类似于我的工作解决方案）也被破坏了。它创建了正确的 DOM，但未显示 tspan（在 Firefox 和 Chrome 中尝试过）：
//creates correct DOM, but disables/hides the created tspan
var tmp = $("<text>")
tmp.html('aaa <tspan style="font-weight:bold">bbb</tspan> ccc')
$("#test").append( Array.prototype.slice.call(tmp[0].childNodes) )
根据 W3C 规范，应该可以混合使用tspan 和 TextNode。
var t = d3.select("#test")
t.append("tspan").text("aaa ");
t.append("tspan").text("bbb").style("font-weight","bold");
t.append("tspan").text(" ccc");
document.getElementById("test").style.fontWeight="bold"
以上改变了一切。
但是你可以试试 innerHTML 方法：
document.getElementById("test").innerHTML('aaa <tspan style=\"font-weight:bold\">bbb</tspan> ccc');
尝试这个
d3.select("#test").html('aaa <tspan style="font-weight:bold">bbb</tspan> ccc');