別のsvgイメージのrect要素にsvgイメージを追加するにはどうすればよいですか？

私は、SVG画像内rect要素にSVG画像を追加しようとしているD3を使用して別のsvgイメージのrect要素にsvgイメージを追加するにはどうすればよいですか？

chart.selectAll("rect.bar") 
    .each(function(datum, index) { 
    d3.select(this) 
     .append("svg:image") 
     // ..some attributes 
    });

をしようとこれはDOMに<image>が追加されますが、画像は表示されません。また、jqueryを使用して、.eachブロックのthisを選択しようとしました。このブロックはDOMに追加されますが、表示されません。

はjqueryのために私は、私が.selectAllとrect.barごとに一つの画像を作成することができました

<html lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

html要素にsvgとxlink名前空間を

$(this).after("<svg:image xlink:href='/images/image.svg' x='20' y='20' width='20' height='20'/>");

でそれを追加しましたしかし私はdatum値に基づいてより多くを作成したいと思います。

出典

2012-04-26 zlog

属性は、罰金でした。 – zlog

私は質問を更新しました。 – zlog

このようにお試しください。

chart.selectAll("rect.bar") 
    .each(function(datum, index) { 
    $(this).append("<img href='http://www.mysite.com/images/test.jpg' />") 
     // ..some attributes 
    });

出典

2012-04-26 16:27:11 Adil

実際、これは動作しますが、私のコードも動作します（チェックしなかったrect.bar要素の中に追加されています）。問題は、d3/jqueryなどを使用してsvgイメージを追加する構文の権利を取得できないことです。私は質問を更新します。 – zlog

いいです、私は予防策を講じました。その重要な要素が必要な要素を取得している場合 – Adil

私はイメージが内部rect.bar要素を入れて取得しないように、親要素を選択するためにjqueryのを使用するために必要ですが、それと並んで。コードはこちら

chart.selectAll("rect.bar") 
    .each(function(datum, index) { 
    var rectBar = $(this).parent()[0]; // Needs parent object, otherwise it will append inside rect 
    var num = 4; 

    for (var i = 0; i < num; i++) { 
     d3.select(rectBar) 
     .append("svg:image") 
      // ...some attributes 
    } 
    });

.parent()そのものは機能しませんでした。私は明示的に.parent()[0]をする必要がありました。理由は分かりません。

出典

2012-04-27 09:06:07 zlog

あなたにとって重要かどうかわかりませんが、jqueryを使用せずにこれを行うことができると思います。 Mike Bostockの "D3 Workshop"プレゼンテーションは、DOM内の要素を適切に選択して追加する方法を示しています。

任意の要素を選択できたら、任意のSVG図面（たとえば、矩形、円、テキストなど、さらに外部画像）を追加できます。追加されるイメージの配置を制御するために、単に "dx"と "dy"座標オフセットコントローラを使用することができます。

例では、 "Multiple D3 Pie Charts Mixed With Common HTML Layout Constructs"では、HTMLページのHTML DIVの場所に基づいて複数のSVGキャンバスを作成します。次に、バーをSVGキャンバス上の特定の場所に配置します。次に、凡例の箇条書きを同じSVGキャンバスの異なるポイントに追加して配置します。最後に、を追加して、凡例のテキストを別の場所にある同じSVGキャンバスに配置します。いずれの場合も、私はdxとdy座標コントローラーを使ってオブジェクトの配置を制御します。彼らは働いていた私の.selectAllの試みで使用されたとして、私はこのことができます願ってい

、

フランク私が持っていた

出典

2012-05-02 00:26:25

別のsvgイメージのrect要素にsvgイメージを追加するにはどうすればよいですか？

答えて

関連する問題