1

誰かが私が作成した svg 要素を検証し、テキストが表示されない理由を説明できますか?

バックストーリーとして、d3.js をよりよく理解するために取り組んでいるスクリプトがあります。最新の問題は、ノードのグループを囲むハルを作成し、それを識別するためにハルを形成するパスにラベルを挿入することです。

コードはノードを生成し、周囲の船体は問題ありません。船体は SVG パスであるため、パスにマップするテキスト要素とテキストパスを追加できるはずです。

いくつかのハッキングを行うと、テキストが表示されることがありますが、「適切に」書くと何も表示されません。結果の svg コードは次のとおりです。

<g id="hull_elements">
<text>
    <textPath stroke="black" xlink:href="#Secure">Secure</textPath>
</text>
<text>
    <textPath stroke="black" xlink:href="#DMZ">DMZ</textPath>
</text>
<path class="boundary" id="Secure" d="M24.994993112707032,141.1110721988244L207.12813092409354,138.58243426955073L238.50323679510393,118.21543431124748L24.97785884420025,103.5985025585574Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>

<path class="boundary" id="DMZ" d="M88.15998924466983,242.42648560274165L208.29914853798698,349.28995851784157L189.37253440909416,316.73364831006586L117.42121587510853,219.36649184836727Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
</g>

これは有効だと思います-テキスト要素をパスの上または下に簡単に移動できますが、テキストはまだ表示されません。

フィドルはhttp://jsfiddle.net/zuzzy/hWd7K/1/にあり、テキストパス部分は382行目あたりです

誰かがこれの何が悪いのか提案できますか? 実際に何かが機能する奇妙な時間（たとえば、370行目あたりのjsfiddle http://jsfiddle.net/zuzzy/cxnT8/を参照してください.d3までは間違って実装されていますが、実際にはテキストが表示されます）

ありがとう！

4

1 に答える 1

0

テキストの上にパスを描いたので、それを覆います。本文を見たい方はこちら

a）パスの上に描画します

function tick() {
  hullvis.selectAll("path")
        .data(groups)
        .attr("d", groupPath)
        .enter().insert("path", "realnode")
        .style("fill", "lightsteelblue")
        .style("stroke", "lightsteelblue")
        .style("stroke-width", 40)
        .style("stroke-linejoin", "round")
        .attr("class", "boundary")
        .attr("id", function (d) {return d.key;});

    //redraw the hull
    hullvis.selectAll("text")
        .data(groups)
        .enter().append("text").append("textPath")
        .attr("stroke","black")
        .attr("xlink:href", function (d) {return "#" + d.key;})
        .text(function (d) { return d.key;} );

また

<defs>b) パスをタグの子として作成するか、必要に応じて Visibility:hidden にしてパスを非表示にします。

于 2013-06-02T13:21:58.427 に答える