66

まず、d3.js を使用して、さまざまなサイズの円を配列で表示しています。マウスオーバーすると、マウスオーバーしている円を大きくしたいのですが、それはできますが、それを前面に出す方法がわかりません。現在、レンダリングされると、他の複数の円の背後に隠れます。どうすればこれを修正できますか?

コードサンプルは次のとおりです。

   .on("mouseover", function() { 
    d3.select(this).attr("r", function(d) { return 100; })
  })

sort メソッドと order メソッドを使用してみましたが、うまくいきませんでした。私はそれを正しくしなかったと確信しています。何かご意見は？

4

4 に答える 4

122

TL;DR

D3 の最新バージョンでは、 tmpearceの回答でselection.raise()説明されているように使用できます。下にスクロールして賛成票を投じてください！

元の答え

オブジェクトの順序を変更し、マウスオーバーした円を最後に追加された要素にする必要があります。ここでわかるように: https://gist.github.com/3922684およびnautatで提案されているように、メイン スクリプトの前に次を定義する必要があります。

d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

次に、マウスオーバーでmoveToFrontオブジェクトの関数を呼び出す必要があります（たとえば、circles）：

circles.on("mouseover",function(){
  var sel = d3.select(this);
  sel.moveToFront();
});

編集: Henrik Nordbergが示唆しているように、.data(). これは、要素へのバインディングを失わないようにするために必要です。詳細については、ヘンリックの回答を読んでください（そして賛成してください！）。.data()一般的なアドバイスとして、 d3 の完全なパフォーマンス機能を活用するために、データを DOM にバインドするときは常に の 2 番目の引数を使用してください。

編集: Clemens Tolboomが 述べたように、逆関数は次のようになります。

d3.selection.prototype.moveToBack = function() {
    return this.each(function() {
        var firstChild = this.parentNode.firstChild;
        if (firstChild) {
            this.parentNode.insertBefore(this, firstChild);
        }
    });
};
于 2013-01-20T16:18:52.357 に答える