3

http://bl.ocks.org/JohnBerryman/2295155

これは、D3 にテンプレートを追加する私の試みです。Inkscape で元の顔を描き、SVG を iCanHaz テンプレートに変換して、テンプレート変数を顔の寸法に対応させました。このようにして、顔を定義することができ (そして、その延長として、他のものも)、顔を簡単にインスタンス化することができます。また、顔オブジェクトにバインドされたデータを更新するだけで、顔を変更することさえできます。コードの最初の部分 (デモをスクロールした場合) は D3 へのパッチであり、残りのコードはそのパッチを使用します。

残念ながら、私はこれについて良いテストを行ったり、Bostock 氏にプル リクエストを送信したりすることができませんでした。

質問:

  1. D3はまだ初心者です。これは別の方法で D3 で実行できるものですか?私はそれについて知りません。
  2. これは一般的に有用ですか？プルリクエストを送信する価値はありますか?
  3. d3風ですか？ここのコードは d3 に適したコードを表していますか?
4

3 に答える 3

1

特に ICanHaz を使用したことはありません (ただし、一般的にはテンプレートを使用して十分に作業しました)。そのため、重要な何かが欠けている可能性があります。しかし、これには D3 を拡張する必要はないように思えます。

コンパイルされたテンプレート (ich またはそれ以外) は単に html を返す関数であることを考えると、次のようにすることができます。

vis.selectAll('.head').data(data)
  .enter()
    .append('g')
    .attr('class', 'head')
    .html(ich.head) // <--- THIS
    .attr('transform',function(d) {return 'translate('+ d.x +' '+ d.y +')'});

これにより、すべての要素が呼び出され、とich.headが渡されます。したがって、 をich テンプレートに渡すことが望ましくない動作を引き起こさない限り、同じ結果が得られると確信しています。dii

iich テンプレートに渡すことが問題である場合、回避策は次のようになります。

.html(function(d,i) { return ich.head(d); })
于 2013-02-25T18:59:36.123 に答える
0

@meetamitの答えはほとんど正しいです。ただし、これを適切に機能させるには、iCanHaz テンプレートの生の HTML 出力を使用する必要がありました。これには、ICH への呼び出しが少し異なります。

vis.selectAll('.head').data(data)
.enter()
.append('g')
.attr('class', 'head')
.html(function(d){ return ich.head(d, true); } ) // <--- THIS
.attr('transform',function(d) {return 'translate('+ d.x +' '+ d.y +')'});

オブジェクトの代わりに HTML を返すように ICH に指示する「true」パラメータに注意してください。

于 2013-10-18T19:13:11.337 に答える