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

実用的なソリューション

主な問題は、innerHTMLSVG要素に属性がなく、すべてのサブノードを自分で作成する必要があることです。tspanただし、この文字列のみを使用して一時DOMオブジェクトを作成することにより、HTML文字列をスタイル付きの（文字列解析なしの）文字列解析マジックに変換できます。その後、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)
})

残りの問題：childNodesこのソリューションは、ソース要素をトラバースし、サブノードと新しいサブ要素（および他のタグ）から対応する親に（およびstyle他のプロパティ）をコピーする必要があるtspansのサブノードをサポートしていませんtspans（または他のタグ）。これにより、最終的にはサブtspan互換のパーサーが作成され、ケースが完全に解決されます。appendtspan

編集：サブノードも処理できる、より一般的な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 に答える