web-dev-qa-db-ja.com

d3svg拡張子の付いた画像を追加します

拡張子が「.svg」のsvg画像をチャートに追加しようとしています（d3で作成された別のsvg画像）。

これはコードです：

d3.select("#chart1 svg")
  .append("svg:image")
  .attr("xlink:href", "img/icons/Sun.svg")
  .attr("width", 40)
  .attr("height", 40)
  .attr("x", 228)
  .attr("y",53);

ご覧のとおり、「xlink：href」属性を設定していますが、d3はこれをブラウザーでhrefに変更します。

<image href="img/icons/Sun.svg" width="40" height="40" x="228" y="53"></image>

実際、png拡張子を使用すると、このコードは完全に機能します。何か案が？

javascriptimagesvgd3.jsxlink
13
Emilio

コードはそのまま動作するはずです-ここでは、.svgファイルをd3に添付する例を見ることができます。

http://jsfiddle.net/am8ZB/

画像が実際にそこにある可能性があることを忘れないでください、しかしあなたはそれを見ることができません-あなたは画像がビューエリアの外に置かれたかどうか見るためにブラウザ開発ツールを使ってページを調べるべきです（あなたのx /のために）たとえば、y値）。

この場合、#chart1に関する詳細情報が役立ちます。

16
sangil