1

私は周りを見回しましたが、これは不可能かもしれませんが、d3の選択機能を使用して、svgマークアップのチャンク全体を取得し、それを複数の複製したい構造のスキーマとして使用できれば素晴らしいでしょう。回数。例：

<g class='nice'>
<g class="slice">
    <path fill="#3182bd" d="M1.836909530733566e-15,-30A30,30 0 0,1 25.98076211353316,-14.999999999999995L0,0Z"></path>
    <text transform="translate(10.500000000000002,-18.186533479473212)" text-anchor="middle">bla2</text>
</g>
<g class="slice">
    <path fill="#6baed6" d="M25.98076211353316,-14.999999999999995A30,30 0 0,1 25.980762113533153,15.000000000000007L0,0Z"></path>
    <text transform="translate(21,4.6629367034256575e-15)" text-anchor="middle">bla</text>
</g>

次のような各要素の塗りつぶしとdを追加して属性を変換するよりも、現在の入力ループにポップする方がはるかに簡単です。

.append('path')
.attr('transform', 'M25.98076211353316,-14.999999999999995A30,30 0 0,1 25.980762113533153,15.000000000000007L0,0Z')
.attr(.... etc etc etc

d3がjqueryに似ていることを望んでいると思います。誰かがあなたがそれをどのように行うことができるかについての考えを持っていますか？

4

2 に答える 2

0

d3にはメソッドがあり、試したことはありませんが、グループ内で要素など.html()を作成するために機能することを期待しています。<path>

もちろん、それは各要素の適切な属性を設定することにはなりませんが、jQueryコアに付属するものもありません。そのためには、jadeやICanHazなどのテンプレートライブラリを使用する必要があります。

于 2013-03-08T18:33:53.530 に答える
0

d3.html()メソッドを使用する場合は、SVG要素のinnerHTMLサポートに注意してください（safari、IEではサポートされていません）。

ただし、innerSVGポリフィルを使用して同じ効果を得ることができます。詳細については、 https：//code.google.com/p/innersvg/を参照してください。それはうまくいきます。

次のように使用します。

D3Selection.append("g").node().innerSVG = "<circle class=...";

より良いアプローチは、提供されたd3で選択された要素に目的の構造をネストする方法を導入し、それを使用することです。例えば。：

function appendCircles(group) { 
    group.append("circle").attr("class", "circle1");
    group.append("circle").attr("class", "circle2");
}
于 2014-03-10T20:06:56.443 に答える