48

D3 でネストを行っていますが、ネストされた要素では、親のデータ オブジェクトに到達する必要があります。

今、私はやっています

d3.select(this).node().parentNode.__data__;

より良い方法はありますか？

4

3 に答える 3

72

d3.select(this).node()thisD3セレクションに渡された関数のコンテキストと同じです。このように作り直してd3.select(this.parentNode).datum()、醜い二重下線プロパティを使用せずに正しい値を取得できます。

于 2013-07-03T23:30:32.490 に答える
23

私がよく知っているもう 1 つの方法は.each()、親で使用し、クロージャ内で子を処理することです。

d3.selectAll('.parent').each(function(parentDatum) {
    d3.select(this).selectAll('.child').each(function(childDatum) {
        // do stuff with parentDatum and childDatum here
    });
});
于 2013-03-14T21:16:51.280 に答える
8

まったく同じ問題が発生したときに、この投稿を見つけました。私の解決策は、子に必要なデータを渡すように選択を変更することでした。ノードでデータの冗長性を維持できる場合、これは有効なアプローチであると思います。

[
  {
    title: "Google",
    link: "www.google.com",
    languagePath : "en,fr,it"
  },

  ...
]

説明を助けるために、2 つの列を持つテーブルのコンテキストでこれを使用しました。最初の列には がtitleあり、2 番目の列にはa各accept-language項目の があります。

そのため、分割のサブセレクションを行い、呼び出しlanguagePathごとに、テキストを言語として を作成しました。entera

したがって、この時点linkで、a要素が次のようになるように も必要です。

<a href="www.google.com/en">EN</a>
<a href="www.google.com/fr">FR</a>

しかし、linkこれはこの子に渡されるデータの一部ではないため、次の代わりに選択を行った場合:

var langLinks = tableRow
     .append("td")
     .selectAll("span")
     .data(function(d) {
        return d.languagePath.split(",")
      })

やった

 var langLinks = tableRow
     .append("td")
     .selectAll("span")
     .data(function(d) {
        return d.languagePath.split(",").map(function(item) {
                 return {
                   lang : item,
                   link : d.link
               })
      })

そのため、この選択を処理dataしているときenter()、親のデータがあります。

これがあなたの何人かにとって有効な代替手段であることを願っています、それは私を助けました.

于 2014-04-16T16:26:00.213 に答える