BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] D3.jsを使用してsvgコンテナに画像を追加する方法

2022-02-19 11:56:01

質問

Asp.Net MVC 4のサンプルアプリケーションを作成し、D3.jsを使ってSVG要素を追加し、SVGの中にテキスト要素を追加しました（下記のコード参照）。 これは、ローカルのpngファイルを使用してSVGにimgを追加しようとするまでは、すべてうまく動作します。 このimgはDOMに追加されますが、ページには描画されません。 私がここで間違っていることと、それを修正するために行く方法について何か考えがありますか？ 

@{
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/d3.v3.js"></script>
<script type="text/javascript">
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 200)
        .attr("height", 100)
        .style("border", "1px solid black");

    var text = svg.selectAll("text")
        .data([0])
        .enter()
        .append("text")
        .text("Testing")
        .attr("x", "40")
        .attr("y", "60");

    var imgs = svg.selectAll("img").data([0]);
    imgs.enter()
        .append("img")
        .attr("xlink:href", "@Url.Content("~/Content/images/icons/refresh.png")")
        .attr("x", "60")
        .attr("y", "60")
        .attr("width", "20")
        .attr("height", "20");

</script>

Richard Marr - 下記は同じことをストレートなHTMLで行おうとしたものですが、同じ結果になりました。 この方法でローカルドライブからrefresh.pngファイルを取得するための私のコードについてはよくわかりません。 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://d3js.org/d3.v2.js"></script>

    </head>
    <body>
        <script type="text/javascript">
            var svg = d3.select("body")
                .append("svg")
                .attr("width", 200)
                .attr("height", 100)
                .style("border", "1px solid black");

            var text = svg.selectAll("text")
                .data([0])
                .enter()
                .append("text")
                .text("Testing")
                .attr("x", "40")
                .attr("y", "60");

            var imgs = svg.selectAll("img").data([0]);
                imgs.enter()
                .append("svg:img")
                .attr("xlink:href", "file:///D:/d3js_projects/refresh.png")
                .attr("x", "60")
                .attr("y", "60")
                .attr("width", "20")
                .attr("height", "20");

        </script>
    </body>
</html>

解決方法は？

SVGでは（HTMLと対比させるために）以下のようにしたいものです。 <image> の代わりに <img> を要素に使用します。

で最後のブロックを変えてみてください。 

var imgs = svg.selectAll("image").data([0]);
            imgs.enter()
            .append("svg:image")
            ...

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します