2 
<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');

不幸的是不起作用，因为参数被视为纯字符串。这个问题的最佳跨浏览器解决方案是什么？

4

4 回答 4

4

工作解决方案

主要问题是 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。

于 2012-12-20T13:07:46.267 回答
0 
var t = d3.select("#test")
t.append("tspan").text("aaa ");
t.append("tspan").text("bbb").style("font-weight","bold");
t.append("tspan").text(" ccc");
于 2012-12-20T00:48:27.917 回答
-1 
document.getElementById("test").style.fontWeight="bold"

以上改变了一切。

但是你可以试试 innerHTML 方法：

document.getElementById("test").innerHTML('aaa <tspan style=\"font-weight:bold\">bbb</tspan> ccc');
于 2012-12-19T22:33:21.687 回答
-3

尝试这个

d3.select("#test").html('aaa <tspan style="font-weight:bold">bbb</tspan> ccc');
于 2012-12-19T22:42:35.457 回答