2

D3 JSサンプルの1つをカスタマイズしようとしていますが、複雑なグラフィックを追加する方法に固執しています。

これは私が変更しようとしているスクリプトです：http：//bl.ocks.org/jmgimeno/1665141

下部のハンドラーに、より良いグラフィックを追加したいと思います。iPhoneのビデオ編集コントロールがどのように見えるかのようなもの：http：//bit.ly/ZDjnOq

さて、それを行う唯一のオプションは、複雑なSVGグラフィックスを使用することだと思います。そこで、iPhoneコントロールに似たグラフィックスコントロール用のSVGファイルを作成しました。

私のSVGファイルは次のようになります：

    <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="37.5px"
     height="20.25px" viewBox="0 0 37.5 20.25" enable-background="new 0 0 37.5 20.25" xml:space="preserve">
<g id="Layer_2">
</g>
<g id="Layer_1">
    <path fill="none" stroke="#F28A1A" stroke-miterlimit="10" d="M34.442,15.665c0,1.565-1.27,2.835-2.835,2.835H5.594
        c-1.565,0-2.835-1.27-2.835-2.835V3.834C2.759,2.269,4.028,1,5.594,1h26.014c1.565,0,2.835,1.269,2.835,2.834V15.665z"/>
    <g>
        <path fill="#FFFFFF" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" d="M4.342,12.298
            c0,0.874-0.709,1.583-1.584,1.583l0,0c-0.874,0-1.583-0.709-1.583-1.583V7.131c0-0.874,0.709-1.583,1.583-1.583l0,0
            c0.875,0,1.584,0.709,1.584,1.583V12.298z"/>
        <line fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="9.715" x2="3.466" y2="9.715"/>

            <line id="XMLID_16_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="8.976" x2="3.466" y2="8.976"/>

            <line id="XMLID_15_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="10.369" x2="3.466" y2="10.369"/>
    </g>
    <g>
        <path fill="#FFFFFF" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" d="M36.025,12.298
            c0,0.874-0.709,1.583-1.584,1.583l0,0c-0.874,0-1.583-0.709-1.583-1.583V7.131c0-0.874,0.709-1.583,1.583-1.583l0,0
            c0.875,0,1.584,0.709,1.584,1.583V12.298z"/>
        <line fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="9.715" x2="35.149" y2="9.715"/>

            <line id="XMLID_14_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="8.976" x2="35.149" y2="8.976"/>

            <line id="XMLID_13_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="10.369" x2="35.149" y2="10.369"/>
    </g>
</g>
</svg>

どういうわけか、上記のコードを使用すると、SVGグラフィックが表示されません。

より単純な形式のSVGが必要ですか？またはそれ以上の何かがあります。

4

1 に答える 1

2

複雑なパスは、d3 がデータとして使用できる配列に svg 要素情報を入れることでレンダリングできます。

http://bl.ocks.org/AndrewStaroscik/5220771

于 2013-03-22T12:19:03.707 に答える