How can I bring a circle to the front with d3?

by

TL;DR

With latest versions of D3, you can use selection.raise() as explained by tmpearce in its answer. Please scroll down and upvote!

Original answer

You will have to change the order of object and make the circle you mouseover being the last element added. As you can see here: https://gist.github.com/3922684 and as suggested by nautat, you have to define the following before your main script:

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

Then you will just have to call the moveToFront function on your object (say circles) on mouseover:

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

Edit: As suggested by Henrik Nordberg it is necessary to bind the data to the DOM by using the second argument of the .data(). This is necessary to not lose binding on elements. Please read Henrick’s answer (and upvote it!) for more info. As a general advice, always use the second argument of .data() when binding data to the DOM in order to leverage the full performance capabilities of d3.

Edit:
As mentioned by Clemens Tolboom, the reverse function would be:

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

More Related Contents:

  1. Selecting null: what is the reason behind selectAll(null) in D3?
  2. How to load data from a CSV file in D3 v5
  3. variable scope in d3 javascript
  4. Scaling d3 v4 map to fit SVG (or at all)
  5. Replacing d3.transform in D3 v4
  6. How do I include newlines in labels in D3 charts?
  7. Retrieve DOM target from drag callback when `this` is not available
  8. Resize svg when window is resized in d3.js
  9. Invoke a callback at the end of a transition
  10. Updating SVG Element Z-Index With D3
  11. How do you create a family tree in d3.js?
  12. Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key?
  13. D3js – change Vertical bar chart to Horizontal bar chart
  14. In d3, how to get the interpolated line data from a SVG line?
  15. Creating and appending detached elements with d3.create
  16. D3js take data from an array instead of a file
  17. Wrapping Text in D3
  18. D3 fill shape with image using pattern
  19. Initial Range selection in DC.js chart
  20. How to use x and width in a bar chart with scaleTime?
  21. d3 js – loading json without a http get
  22. Setting rounded corners for svg:image
  23. svg / d3.js rounded corners on one side of a rectangle
  24. Adding new nodes to Force-directed layout
  25. How do I return y coordinate of a path in d3.js?
  26. Dynamically resize the d3 tree layout based on number of childnodes
  27. D3.js Set initial zoom level
  28. D3 put arc labels in a Pie Chart if there is enough space
  29. d3.js histogram with positive and negative values
  30. read csv/tsv with no header line in D3

Leave a Comment