web-dev-qa-db-ja.com

d3.jsにsvgシェイプをインポートすることは可能ですか？

D3.jsの初日は順調ですが、プレースホルダーの円の形を少し複雑なものに変更する必要があります。

Illustratorなどで作成したSVG図形をd3.jsチャートに「インポート」できますか？

D3で再描画できることはわかっていますが、今は頭が痛いです...えーと...

それはポイントのある単純なバブルです：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="77px" height="41px" viewBox="0 0 77 41" enable-background="new 0 0 77 41" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#999999" d="M0,13C0,5.82,5.82,0,13,0h51c7.18,0,13,5.82,13,13s-5.82,13-13,13
    H47l-7,15l-7-15H13C5.82,26,0,20.18,0,13z"/>
</svg>

シェイプとしてインポートできますか？

または、そのパスをd3jsで直接変換する方法はありますか？

ありがとう！

svgd3.js
20
rolfsf

「インポートされた」とは、ページマークアップの一部であり、d3コードで使用されることを意味する場合、はい、 svg defs element を使用してカスタムシェイプの定義を保持できます。次に、コードの後半で、それを参照するためのuse要素を作成します。

var node = svg.selectAll("g.node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; } )

node.append("use")
  .attr("xlink:href","#myshape")

上記のアプローチの完全な例を次に示します。 Inkscapeを使用しましたが、概念は同じです。

http://bl.ocks.org/explunit/5988971

Svg定義のxlink名前空間は、use要素が正しく機能するために重要であり、コードが既にあることがわかります。

xmlns:xlink="http://www.w3.org/1999/xlink"

「インポートされた」とは、オンザフライでロードされることを意味する場合、@ LarsKotthoffによって提案されているように、別のアプローチが必要です。しかし、既存の形状定義を再利用したいように思えます。上記のアプローチでそれを実行できます。 <g>要素は形状の位置を設定し、次に子ノード<use>は、前に定義した実際の形状を引き込むために追加されます。

形状の定義は、JavaScript自体ではなく、本体のsvg要素にあります。これは、javascriptコードによって動的に作成されたsvg要素を持つ多くのD3.jsの例とは異なります。

2つの間の唯一の接続は、defsセクションのIDと一致するようにhref（この場合は "myshape"）に入力した文字列IDです。

node.append("use").attr("xlink:href","#myshape")
11
explunit