d3.js v4 d3。ズームやパンの後でのズームとパンの後の複雑で奇妙な要素の順序

d3.zoom機能の奇妙な動作に気づき、コードのどこに問題があるのかを特定できません。私はそれがZインデックス有するSVG有する：Iは、z屈折率を有するノードを包囲している100 ：：1000d3.js v4 d3。ズームやパンの後でのズームとパンの後の複雑で奇妙な要素の順序

をだからSVG線が目の前にいる私はそれがz屈折率を有するルートノードを有する900 をrootNodeとその周囲のノードは、rootNodeとSVG要素の前にあります。

これは本当のことですが、私がパンまたはズームした後でなければ、すべてのsvgラインが前に来て私には意味がないためです。 zオーダーは変更のdidntともDOMは..

しなかった私は、問題を示すバイオリンを作った：https://jsfiddle.net/jxkgfdcm/

//create a svg in the body of index.html 
var svg = container.append("svg") 
    .classed("simulation", 1) 
    .attr("width", width) 
    .attr("height", height) 
    .style("z-index", 900);

出典

2017-03-15 Bernd Da

SVGにはZインデックスはありません。しかし、あなたは簡単にSVGをしている<div>のzインデックスを設定することができます

：https://jsfiddle.net/vafc312a/

出典

2017-03-15 11:05:22

こんにちはヘラルド、あなたの助けに感謝し、それは良いことだ：

var svg = container.append("div") .style("z-index", 999)//z-index of the div .append("svg")//append the SVG to that div .classed("simulation", 1) .attr("width", width) .attr("height", height);

ここでは、あなたの更新フィドルですz-indexがSVGに適用されないことを知っています。残念ながら、それは問題を解決しません。たとえば、更新されたフィドルのノードのZ-インデックスをSVGの999よりも低い値に変更した場合、それらはラインの後ろに表示されません。彼らはまだ前にいる。負の-1を与えた後でのみ、後ろに表示されますが、ズームインまたはズームアウトするか、グラフをパンすると、再び前面に表示されます.zインデックスを-1に設定すると更新されます。https：// jsfiddle.net/vafc312a/1/ –

d3.js v4 d3。ズームやパンの後でのズームとパンの後の複雑で奇妙な要素の順序

答えて

関連する問題