Sorting objects based on property value in D3
Solution 1
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}
]
Solution 2
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"];
});
Related videos on Youtube
Sam Mason
Updated on July 05, 2022Comments
-
Sam Mason almost 2 years
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?
-
Travis J almost 10 yearsWhy not just sort them in the array before using it?
-
Casey Falk almost 10 yearsJust pass
.sort()
a custom sorting function. You can access theindex
property of the objects and use to determine order. javascriptkit.com/javatutors/arraysort.shtml -
Sam Mason almost 10 years@TravisJ Ideally this is what I would like to do sorry for not being more descriptive
-
-
Casey Falk almost 10 yearsWhy
stringify
the results? You don't really need it. :) -
mdml almost 10 yearsJust so the output in my console doesn't say
[Object, Object, Object, ...]
. But yeah, perhaps doesn't need to be in my answer. -
tyleha over 6 yearsWhat if some array objects have undefined values? It doesn't appear that
d3
sort deals with these cases.