20

I have a array of objects for use in D3 e.g

var cities = [
  { city: "London", country: "United Kingdom", index: 280 },
  { city: "Geneva", country: "Switzerland", index: 259 },
  { city: "New York City", country: "United States", index: 237 },
  { city: "Singapore", country: "Singapore", index: 228 },
  { city: "Paris", country: "France", index: 219 },
  { city: "San Francisco", country: "United States", index: 218 },
  { city: "Copenhagen", country: "Denmark", index: 217 },
  { city: "Sydney", country: "Australia", index: 215 },
  { city: "Hong Kong", country: "Hong Kong", index: 214 },
  { city: "Brisbane", country: "Australia", index: 208 }
}

I would like to order the objects in ascending order based on their cities.index property. So that I can display them as such in D3.js. Im sure there is a way of doing this in D3 but I am yet to figure it out when dealing with an array of objects.

Any help?

3
  • 1
    Why not just sort them in the array before using it?
    – Travis J
    Aug 6, 2014 at 19:00
  • Just pass .sort() a custom sorting function. You can access the index property of the objects and use to determine order. javascriptkit.com/javatutors/arraysort.shtml
    – Casey Falk
    Aug 6, 2014 at 19:01
  • @TravisJ Ideally this is what I would like to do sorry for not being more descriptive
    – Sam Mason
    Aug 6, 2014 at 19:03

3 Answers 3

33

You can pass an anonymous function to the Javascript Array.prototype.sort to sort by index. D3 has a function d3.ascending (v 3.x) that makes it easy to sort ascending:

cities.sort(function(x, y){
   return d3.ascending(x.index, y.index);
})

And here's the output:

[
 {"city":"Brisbane","country":"Australia","index":208},
 {"city":"Hong Kong","country":"Hong Kong","index":214},
 {"city":"Sydney","country":"Australia","index":215},
 {"city":"Copenhagen","country":"Denmark","index":217},
 {"city":"San Francisco","country":"United States","index":218},
 {"city":"Paris","country":"France","index":219},
 {"city":"Singapore","country":"Singapore","index":228},
 {"city":"New York City","country":"United States","index":237},
 {"city":"Geneva","country":"Switzerland","index":259},
 {"city":"London","country":"United Kingdom","index":280}
]
3
  • Why stringify the results? You don't really need it. :)
    – Casey Falk
    Aug 6, 2014 at 19:13
  • 2
    Just so the output in my console doesn't say [Object, Object, Object, ...]. But yeah, perhaps doesn't need to be in my answer.
    – mdml
    Aug 6, 2014 at 19:19
  • What if some array objects have undefined values? It doesn't appear that d3 sort deals with these cases.
    – tyleha
    Feb 2, 2018 at 23:44
6

Just sort the array before you use it in D3, as Travis J mentioned in a comment. There's no reason to use D3 to sort (d3.ascending is just a comparison wrapper anyway).

Also, note that you have a } where you want a ] at the end of your declaration.


You can access each object's properties as so:

cities.sort(function(a, b){
    return a["index"]-b["index"];
});
-1

As @Casey Falk said d3.sort is an elegant method in d3 library. I code the following to solve my problem:

const axisGrid = svg.append("g")
const photoGroup = axisGrid.append("g")
        .selectAll("g")
        .data(photo_data)
        .enter()
        .append("g")

const photos = photoGroup.append("image");
photos.on("mouseenter", function(curItem) {
        // selection.sort(compare) https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_sort
        photoGroup.sort((a, b) => {
          if (a.photo == curItem.photo) { // make the current image element on top
            return 1
          } else {
            return -1
          }
        })
1
  • Your code doesn't seem to use d3 at all. There is a comment reference to selection.sort but that sorts DOM elements and not a generic array, which is what the question is about.
    – btx9000
    Dec 5, 2022 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.