1

rectd3を使用して、svg画像の要素にsvg画像を追加しようとしています

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

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

jqueryの場合、私はそれを追加しました

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

要素内のsvgおよびxlink名前空間html

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

rect.barで1 枚の画像を作成できましたが.selectAll、値に基づいてさらに作成したいと考えていdatumます。

4

3 に答える 3

2

jquery を使用して親要素を選択し、画像が要素内ではrect.barなく横に配置されるようにする必要がありました。ここにコード：

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-27T09:06:07.347 に答える
1

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

任意の要素を選択できるようになると、任意の SVG 描画 (たとえば、四角形、円、テキストなど、さらには外部画像) を追加できます。追加される画像の配置を制御するには、「dx」および「dy」座標オフセット コントローラーを使用するだけでよいと思います。

「一般的な HTML レイアウト構造と混合された複数の D3 円グラフ」の例では、最初に、HTML ページの HTML DIV の場所に基づいて複数の SVG キャンバスを作成します。次に、バーを SVG キャンバスの特定の場所に配置します。次に、凡例の箇条書きを同じ SVG キャンバスのさまざまなポイントに追加して配置します。最後に、同じ SVG キャンバスの異なる場所に凡例テキストを追加して配置します。いずれの場合も、dx および dy 座標コントローラーを使用してオブジェクトの配置を制御します。

これが役に立てば幸いです。

フランク

于 2012-05-02T00:26:25.247 に答える
0

このようにしてみてください。

chart.selectAll("rect.bar")
  .each(function(datum, index) {
    $(this).append("<img href='http://www.mysite.com/images/test.jpg' />")
        // ..some attributes
  });
于 2012-04-26T16:27:11.307 に答える