D3でSVG要素のZインデックスを更新する

D3ライブラリを使用してSVG要素をzオーダーの最上位に移動する効果的な方法は何ですか？

私の特定のシナリオは、マウスが特定の部分の上にあるときに（にを追加strokeしてpath）強調表示する円グラフです。チャートを生成するためのコードブロックは次のとおりです。

svg.selectAll("path")
    .data(d)
  .enter().append("path")
    .attr("d", arc)
    .attr("class", "arc")
    .attr("fill", function(d) { return color(d.name); })
    .attr("stroke", "#fff")
    .attr("stroke-width", 0)
    .on("mouseover", function(d) {
        d3.select(this)
            .attr("stroke-width", 2)
            .classed("top", true);
            //.style("z-index", 1);
    })
    .on("mouseout", function(d) {
        d3.select(this)
            .attr("stroke-width", 0)
            .classed("top", false);
            //.style("z-index", -1);
    });

私はいくつかのオプションを試しましたが、今のところ運がありません。両方の使用style("z-index")と呼び出しclassedは機能しませんでした。

「トップ」クラスは、私のCSSでは次のように定義されています。

.top {
    fill: red;
    z-index: 100;
}

このfillステートメントは、正しくオン/オフになっていることを確認するためのものです。です。

使用sortはオプションだと聞きましたが、「選択された」要素を一番上に表示するためにどのように実装されるかはわかりません。

更新：

次のコードで特定の状況を修正しました。このコードは、mouseoverイベントのSVGに新しいアークを追加して、ハイライトを表示します。

svg.selectAll("path")
    .data(d)
  .enter().append("path")
    .attr("d", arc)
    .attr("class", "arc")
    .style("fill", function(d) { return color(d.name); })
    .style("stroke", "#fff")
    .style("stroke-width", 0)
    .on("mouseover", function(d) {
        svg.append("path")
          .attr("d", d3.select(this).attr("d"))
          .attr("id", "arcSelection")
          .style("fill", "none")
          .style("stroke", "#fff")
          .style("stroke-width", 2);
    })
    .on("mouseout", function(d) {
        d3.select("#arcSelection").remove();
    });

開発者が提示した解決策の1つは、「D3のソート演算子を使用して要素を並べ替える」です。（https://github.com/mbostock/d3/issues/252を参照）

この観点から、データを比較することによって要素を並べ替えるか、データのない要素の場合は位置を並べ替えることができます。

.on("mouseover", function(d) {
    svg.selectAll("path").sort(function (a, b) { // select the parent and sort the path's
      if (a.id != d.id) return -1;               // a is not the hovered element, send "a" to the back
      else return 1;                             // a is the hovered element, bring "a" to the front
  });
})

他の回答で説明されているように、SVGにはz-indexの概念がありません。代わりに、ドキュメント内の要素の順序によって、図面内の順序が決まります。

要素を手動で並べ替える以外に、特定の状況では別の方法があります。

D3を使用すると、特定の種類の要素が常に他の種類の要素の上に描画されることがよくあります。

たとえば、グラフをレイアウトする場合、リンクは常にノードの下に配置する必要があります。より一般的には、一部の背景要素は通常、他のすべての下に配置する必要がありますが、一部のハイライトとオーバーレイは上に配置する必要があります。

このような状況の場合は、それらの要素グループの親グループ要素を作成するのが最善の方法であることがわかりました。SVGでは、gそのための要素を使用できます。たとえば、常にノードの下に配置する必要があるリンクがある場合は、次のようにします。

svg.append("g").attr("id", "links")
svg.append("g").attr("id", "nodes")

ここで、リンクとノードをペイントするときに、次のように選択します（#要素IDを参照して始まるセレクター）。

svg.select("#links").selectAll(".link")
// add data, attach elements and so on

svg.select("#nodes").selectAll(".node")
// add data, attach elements and so on

これで、すべてのリンクは常にすべてのノード要素の前に構造的に追加されます。したがって、SVGは、要素を追加または削除する頻度と順序に関係なく、すべてのノードの下にすべてのリンクを表示します。もちろん、同じタイプの（つまり、同じコンテナ内の）すべての要素は、追加された順序に従います。

SVGにはZインデックスがありませんが、DOM要素の順序を使用するため、次の方法でSVGを前面に表示できます。

this.parentNode.appendChild(this);

次に、たとえば、insertBeforeを使用して元に戻すことができmouseoutます。ただし、これには、要素を前に挿入する必要がある兄弟ノードをターゲットにできる必要があります。

デモ：このJSFiddleを見てください

SVGはz-indexを行いません。Z順序は、コンテナー内のSVGDOM要素の順序によって決まります。

私が知る限り（そして私は過去にこれを数回試しました）、D3はそれを前面に出すために単一の要素を取り外したり再取り付けしたりする方法を提供していません。

選択範囲に表示される順序に一致するようにノードを再シャッフルする.order()メソッドがあります。あなたの場合、あなたは単一の要素を前面に持ってくる必要があります。したがって、技術的には、目的の要素を前に（または最後に、どちらが一番上か思い出せない）選択を再利用して、それを呼び出すorder()ことができます。

または、このタスクでd3をスキップし、プレーンJS（またはjQuery）を使用してその単一のDOM要素を再挿入することもできます。

簡単な答えは、d3の順序付け方法を使用することです。d3.select（ 'g'）。order（）に加えて、バージョン4には.lower（）と.raise（）があります。これにより、要素の表示方法が変わります。詳細については、ドキュメントを参照してください-https ：//github.com/d3/d3/blob/master/API.md#selections-d3-selection

私はfuturendのソリューションをコードに実装し、それは機能しましたが、使用している要素の数が多いため、非常に低速でした。これは、私の特定の視覚化でより高速に機能するjQueryを使用した代替方法です。これは、共通のクラスを持つ上に必要なsvgに依存しています（私の例では、クラスはデータセットにd.keyとして示されています）。私のコードには、<g>再編成しているすべてのSVGを含むクラス「locations」を持つがあります。

.on("mouseover", function(d) {
    var pts = $("." + d.key).detach();
    $(".locations").append(pts);
 });

したがって、特定のデータポイントにカーソルを合わせると、コードはその特定のクラスのSVGDOM要素を持つ他のすべてのデータポイントを検索します。次に、それらのデータポイントに関連付けられているSVGDOM要素を切り離して再挿入します。

まったく新しい答えを書き出すのではなく、@ notan3xitが答えたものを拡張したかった（しかし、私には十分な評判がありません）。

要素の順序の問題を解決する別の方法は、描画時に「追加」ではなく「挿入」を使用することです。そうすれば、パスは常に他のsvg要素の前に一緒に配置されます（これは、コードが他のsvg要素のenter（）の前にリンクのenter（）をすでに実行していることを前提としています）。

d3挿入API：https：//github.com/mbostock/d3/wiki/Selections#insert

既存のSVGでZオーダーを微調整する方法を見つけるのに何年もかかりました。ツールチップの動作を伴うd3.brushのコンテキストで本当に必要でした。2つの機能をうまく連携させるには（http://wrobstory.github.io/2013/11/D3-brush-and-tooltip.html）、d3.brushがZオーダーの最初である必要があります（最初にキャンバスに描画され、次に残りのSVG要素で覆われます）そして、その上にあるものに関係なく、すべてのマウスイベントをキャプチャします（より高いZインデックスを使用）。

ほとんどのフォーラムのコメントでは、最初にd3.brushをコードに追加してから、SVGの「描画」コードを追加する必要があると述べています。しかし、私にとっては、外部SVGファイルをロードしたのでそれは不可能でした。いつでも簡単にブラシを追加し、後でZの順序を変更できます。

d3.select("svg").insert("g", ":first-child");

d3.brushセットアップのコンテキストでは、次のようになります。

brush = d3.svg.brush()
    .x(d3.scale.identity().domain([1, width-1]))
    .y(d3.scale.identity().domain([1, height-1]))
    .clamp([true,true])
    .on("brush", function() {
      var extent = d3.event.target.extent();
      ...
    });
d3.select("svg").insert("g", ":first-child");
  .attr("class", "brush")
  .call(brush);

d3.js insert（）関数API：https：//github.com/mbostock/d3/wiki/Selections#insert

お役に立てれば！

バージョン1

理論的には、次のことがうまくいくはずです。

CSSコード：

path:hover {
    stroke: #fff;
    stroke-width : 2;
}

このCSSコードは、選択したパスにストロークを追加します。

JSコード：

svg.selectAll("path").on("mouseover", function(d) {
    this.parentNode.appendChild(this);
});

このJSコードは、最初にDOMツリーからパスを削除し、次にそのパスをその親の最後の子として追加します。これにより、同じ親の他のすべての子の上にパスが描画されます。

実際には、このコードはChromeでは正常に機能しますが、他の一部のブラウザでは機能しません。LinuxMintマシンのFirefox20で試しましたが、動作しませんでした。どういうわけか、Firefoxはトリガーに失敗します:hoverスタイルず、これを修正する方法が見つかりませんでした。

バージョン2

そこで私は別の方法を思いついた。それは少し「汚い」かもしれませんが、少なくともそれは機能し、すべての要素をループする必要はありません（他のいくつかの答えのように）。

CSSコード：

path.hover {
    stroke: #fff;
    stroke-width : 2;
}

:hover疑似セレクターを使用する代わりに、.hoverクラス

JSコード：

svg.selectAll(".path")
   .on("mouseover", function(d) {
       d3.select(this).classed('hover', true);
       this.parentNode.appendChild(this);
   })
   .on("mouseout", function(d) {
       d3.select(this).classed('hover', false);
   })

マウスオーバー時に、.hoverクラスをパスに追加します。マウスアウト時に、私はそれを削除します。最初の場合と同様に、コードはDOMツリーからパスを削除し、それを親の最後の子として追加します。

あなたはマウスオーバーでこのようにすることができますあなたはそれを上に引っ張ることができます。

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

d3.selection.prototype.pushElementAsBackLayer = function() { 
return this.each(function() { 
    var firstChild = this.parentNode.firstChild; 
    if (firstChild) { 
        this.parentNode.insertBefore(this, firstChild); 
    } 
}); 

};

nodes.on("mouseover",function(){
  d3.select(this).bringElementAsTopLayer();
});

プッシュバックしたい場合

nodes.on("mouseout",function(){
   d3.select(this).pushElementAsBackLayer();
});