{"id":8070,"date":"2015-11-23T22:49:03","date_gmt":"2015-11-23T22:49:03","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/11\/23\/updating-svg-element-z-index-with-d3-open-source-projects-mbostock-d3\/"},"modified":"2022-08-30T15:03:02","modified_gmt":"2022-08-30T15:03:02","slug":"updating-svg-element-z-index-with-d3-open-source-projects-mbostock-d3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/11\/23\/updating-svg-element-z-index-with-d3-open-source-projects-mbostock-d3\/","title":{"rendered":"Updating SVG Element Z-Index With D3-open source projects mbostock\/d3"},"content":{"rendered":"<p>What is an effective way to bring an SVG element to the top of the z-order, using the D3 library?<\/p>\n<p>My specific scenario is a pie chart which highlights (by adding a <code>stroke<\/code> to the <code>path<\/code>) when the mouse is over a given piece. The code block for generating my chart is below:<\/p>\n<pre><code>svg.selectAll(\"path\")\n    .data(d)\n  .enter().append(\"path\")\n    .attr(\"d\", arc)\n    .attr(\"class\", \"arc\")\n    .attr(\"fill\", function(d) { return color(d.name); })\n    .attr(\"stroke\", \"#fff\")\n    .attr(\"stroke-width\", 0)\n    .on(\"mouseover\", function(d) {\n        d3.select(this)\n            .attr(\"stroke-width\", 2)\n            .classed(\"top\", true);\n            \/\/.style(\"z-index\", 1);\n    })\n    .on(\"mouseout\", function(d) {\n        d3.select(this)\n            .attr(\"stroke-width\", 0)\n            .classed(\"top\", false);\n            \/\/.style(\"z-index\", -1);\n    });\n<\/code><\/pre>\n<p>I&#8217;ve tried a few options, but no luck so far. Using <code>style(\"z-index\")<\/code> and calling <code>classed<\/code> both did not work.<\/p>\n<p>The &#8220;top&#8221; class is defined as follows in my CSS:<\/p>\n<pre><code>.top {\n    fill: red;\n    z-index: 100;\n}\n<\/code><\/pre>\n<p>The <code>fill<\/code> statement is there to make sure I knew it was turning on\/off correctly. It is.<\/p>\n<p>I&#8217;ve heard using <code>sort<\/code> is an option, but I&#8217;m unclear on how it would be implemented for bringing the &#8220;selected&#8221; element to the top.<\/p>\n<p><strong>UPDATE:<\/strong><\/p>\n<p>I fixed my particular situation with the following code, which adds a new arc to the SVG on the <code>mouseover<\/code> event to show a highlight.<\/p>\n<pre><code>svg.selectAll(\"path\")\n    .data(d)\n  .enter().append(\"path\")\n    .attr(\"d\", arc)\n    .attr(\"class\", \"arc\")\n    .style(\"fill\", function(d) { return color(d.name); })\n    .style(\"stroke\", \"#fff\")\n    .style(\"stroke-width\", 0)\n    .on(\"mouseover\", function(d) {\n        svg.append(\"path\")\n          .attr(\"d\", d3.select(this).attr(\"d\"))\n          .attr(\"id\", \"arcSelection\")\n          .style(\"fill\", \"none\")\n          .style(\"stroke\", \"#fff\")\n          .style(\"stroke-width\", 2);\n    })\n    .on(\"mouseout\", function(d) {\n        d3.select(\"#arcSelection\").remove();\n    });\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>What is an effective way to bring an SVG element to the top of the z-order, using the D3 library? My specific scenario is a pie chart which highlights (by adding a stroke to the path) when the mouse is over a given piece. The code block for generating my chart is below: svg.selectAll(&#8220;path&#8221;) .data(d) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8070","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=8070"}],"version-history":[{"count":1,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8070\/revisions"}],"predecessor-version":[{"id":8648,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8070\/revisions\/8648"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=8070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=8070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=8070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}