I have this array of objects
const data = [
{id: 0, type: "inc", amount: 3000},
{id: 1, type: "exp", amount: 1500}
]
When I pass this data to a d3 pie function
const pie = d3.pie().value(d => d.amount);
the inc entry will have index: 0 while exp entry will have index: 1. My understanding, d3 by default assign the largest value index 0, which means startAngle will be 0 for the largest value, and goes on in descending order of the values.
In my case, the application can change the amount of either entry. The default behavior of d3 swaps the order of inc and exp in the pie chart once exp amount exceeds that of inc. I want the entry of type inc to always start from startAngle 0, even if exp entry's amount exceeds that of inc entry. How can I achieve this?
To those who are interested in the answer, it turned out you can define a compare function inside the sort method of the pie function like so
const pie = d3.pie().value(d => d.amount).sort((a) => {
if (a.type === 'inc') {
return -1;
} else {
return 1;
}
});
This will keep the inc entry with index: 0 all the time, regardless of the amount value compared to the exp entry