9

私はforeignObjectSVGで苦労しています。内にテキストを追加したいのですが、rect自動テキストラップを取得するには、HTMLを使用することを選択しました。の説明はここforeignObjectにあります。

私はD3を使用していますが、これは私のデータです。

var cds = [
{"uid":"U12","sid":"16","statement":"Movies","x":10,"y":10},
{"uid":"U20","sid":"17","statement":"Food","x":10,"y":170},
{"uid":"U22","sid":"15","statement":"Sport","x":10,"y":330}
];

データごとにカードを追加し、データから「ステートメント」を表示したいと思います。

var cardsize = { width : 150, height : 150 };

var svg = d3.select("body").append("svg:svg")
    .attr("width", 170)
    .attr("height", 490);

var card =  svg.selectAll("rect")
    .data(cds)
    .enter().append("svg:g")
    .attr("class", "card")
    .attr("transform", function(d,i) { 
        d.x = 10;
        d.y = 10+i*(10+cardsize.height);
        return "translate(" + d.x + "," + d.y + ")";
    });

card.append("svg:rect")
    .attr('width', cardsize.width)
    .attr('height', cardsize.height)

card.append("svg:foreignObject")
    .attr('width', cardsize.width)
    .attr('height', cardsize.height)
    .append('p')
    .attr("class","statement")
    .text(function(d) { return d.statement; });

カードの出力は次のとおりです。

<g class="card" transform="translate(10,330)">
    <rect width="150" height="150"></rect>
    <foreignObject width="150" height="150"><
        p class="statement">Sport</p>
    </foreignObject>
</g>

テストした（mac）ブラウザ（Safari 6.0.2、Chrome 25.0.1364.99、Firefox 18.0.2）でテキストが表示されません。W3のバリデーターは出力が気に入らないので、カードごとに次のエラーが表示されます。

このコンテキストでは、要素foreignObjectは要素gの子として許可されていません。

だから私の質問は、問題はどこにあり、なぜforeignObjectはg要素の子として許可されないのですか？

また、なぜ.html(function(d) { return d.statement; });機能しない（出力がない）のか疑問に思っています。しかし、.text(function(d) { return d.statement; });うまくいきますか？

これがフィドルです。

4

2 に答える 2

15

簡潔な答え

foreignObject のすべてのタグで名前空間を指定します: で置き換えると機能.append("p")し.append("xhtml:p")ます: http://jsfiddle.net/EHzcR/2/

長い答え

異物の文脈では、段落<p></p>として認識されません。xhtmlなんで？単に名前空間がコンテキストxhtmlに含まれていないためです ( aには何か (たとえば、フォーマットされたデータ) が含まれている可能性があるため、明示的に言わなければ入力を html と見なしません)。foreignObjectforeignObjectxml

そのため、pタグはタグではなく、カスタム タグと見なされxhtmlます。したがって、Web ブラウザーは認識しているタグp内のタグを認識しないため、そのタグとそのコンテンツを解釈しないだけであり、存在する場合でもエラーをスローしません。有効ですが、直接使用することはできません。

必要でない場合でも、常に名前空間を指定し、 , ... にも非常に人気のある名前空間があるsvgことを忘れているのを見るのは楽しいことです。pdiv

その実装では要素の関数を使用するselection.html()ため、関数は機能しませんが、ここでは、html 要素ではないforeignObject にそのような関数がありません。.innerHTML()

于 2013-03-01T09:02:05.873 に答える
0

あなたの質問から、実際にforeignObjectsのテキストを表示できるかどうかわかりませんか? (答えが「はい」の場合、使用しているブラウザーは何ですか?)。

以下の方法は私には最適ではないように思われるため、ここで他の回答を楽しみにしていますが、ほとんどの方法でうまくいきます。

Chrome を使用し、 W3C の例<body xmlns="http://www.w3.org/1999/xhtml">に従って、foreignObject 内にタグを生成しようとした後、内にテキストが表示されませんでした。しかし、内部をそのままにして、foreignObject のスタイルを設定するクラスを追加するだけで、望ましい結果が得られました。<p><body><body>

http://jsfiddle.net/6B4zs/5/

以下に追加されたコードの更新部分:

foreignObject テキストを追加するための D3 セクション 

svg.selectAll("foreignObject")
    .data(cds)
    .enter()
  .append("foreignObject")
    .attr("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Extensibility")
    .attr('width', cardsize.width)
    .attr('height', cardsize.height)
    .attr("x", 10)
    .attr("y", function (d, i) { return 10 + i * (10 + cardsize.height) })
    .attr("class", "fo-text")
    .text(function (d) { return d.statement; });

CSS 

.fo-text {
    padding: 5px 10px;  
    font: 300 14px "Helvetica Neue", sans-serif;
    color: #000;
}
于 2013-03-01T02:27:16.387 に答える