0

これは私のかなり基本的な誤解であると感じています。

私はこのツリーの視覚化から作業しています: http://bl.ocks.org/mbostock/4339083

元のバージョンでは、ユーザーが子を持つノードをクリックすると、ノードが開いたり折りたたまれたりします。子を持たないノードをクリックすると、他の効果が得られるようにしたいと考えています (具体的には、別のウィンドウで画像を開きたい)。

オンクリック機能が割り当てられている場所は次のとおりです。

var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("class", function(n) {
        if (n.children) {
            return "inner node"
        } else {
            return "leaf node"
        }
        })
    .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
    .on("click", click);

子を持つノードと持たないノードを区別するために、2 番目のクラス割り当てを追加しました。

これは私の変更されたクリック関数です:

function click(d) {
  if (d.attr("class") == "inner node") {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }
  } else if (d.attr("class") == "leaf node") {
    // open image
  }
  update(d);
}

2 種類のノードを区別するために、外側の if ステートメントを追加しました。

そのため、現在、クリックしても何も機能しません。そのクラス属性の割り当てが機能しなかったか、私が書いたものが意味不明であるために、私の 'd.attr("class") == "inner node"' が false になっていると思います。「ノード」に変更しても機能しません。

また、すべてのノードが折りたたまれた状態で開始されるという事実によって、割り当てが台無しになる可能性があることにも気付きました。子を折りたたむことはこれに影響しますか?

どんな助けでも大歓迎です。

- - - - - - - - - - - - - - - ** 編集 ** - - - - - - - - ---------------

少し遊んでみたところ、「d.attr('class')」ではなく「d.class」を使用する必要があることがわかりました。ただし、これでもまだ機能しません。ここで d が表すものを誤解していると思いますが、そうですか?

------------------------------** 編集 2 **-------------------------- --------------

OK、私の最初の編集は間違っていました。ただし、prayerslayer のおかげで、コードを次のように変更しました。

function click(d) {
  if (d.children || d._children) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }
  } else {
    d3.select( this ).attr("fill", "#CCCCCC");
  }
  update(d);
}

それは今動作します。しかし、私の予想に反して、変更したのは円の塗りつぶしではなく、テキストの塗りつぶしでした。何故ですか？テキストと円は別々にクリックする領域ですが、どちらをクリックしても変化するのは常にテキストです。「これ」は、具体的には円やテキストではなく、ノードを指していると思いますが、なぜどちらか一方を選択したのですか?

4

2 に答える 2

1

ここdで操作している引数は、要素自体ではなく、その特定の要素にバインドされたデータです。として要素にアクセスし、thisそれを選択することで通常の D3 操作を実行できます。つまり、clickハンドラーで次のようなことができます。

function click() {
  if(d3.select(this).attr("class") == "inner node") {
    // do something
  }
}

ドキュメントの詳細。他の答えは、これらのことを処理するためのより良い方法を示しています。さまざまな動作を区別する必要があるデータに直接アクセスできるため、DOM 要素を介してプロキシする必要はありません。

于 2013-09-12T16:56:58.873 に答える