d3 accessor of hierarchical array of objects - d3.js

Question

I'm feeding data to d3 via json in a format that looks like this:
[
{
"outcome_id":22,
"history":[
{
"time":"2013-05-06T16:38:55+03:00",
"balance_of_power":0.2
},
{
"time":"2013-05-07T00:38:55+03:00",
"balance_of_power":0.2222222222222222
},
{
"time":"2013-05-07T08:38:55+03:00",
"balance_of_power":0.36363636363636365
}
],
"winner":true,
"name":"Pauline"
},
{
"outcome_id":23,
"history":[
{
"time":"2013-05-06T16:38:55+03:00",
"balance_of_power":0.2
},
{
"time":"2013-05-07T00:38:55+03:00",
"balance_of_power":0.1111111111111111
},
{
"time":"2013-05-07T08:38:55+03:00",
"balance_of_power":0.09090909090909091
}
],
"winner":false,
"name":"Romain"
}
]
I use this data to draw both a multiple series line chart (to show the evolution of "balance_of_power" through time) and a donut chart to represent the latest value of "balance_of_power" for all series.
So each top-level array element is an object that has several attributes, one of them being "history", which is itself an array of objects (that have the time and balance_of_power attributes).
A working example can be found here.
To produce the data for the donut chart I use a function that takes the latest element from each history array (the data is sorted by time) and generate another attribute that's called "last_balance".
For example the first element becomes:
{
"outcome_id":22,
"history":[...],
"winner":true,
"name":"Pauline",
"last_balance":0.36363636363636365
}
And then I specify the right accessor from the pie layout value:
pie = d3.layout.pie().value(function(d) { return d.latest_balance; })
Now I'd like to get rid of the extra step and change the accessor function so that I can read the value directly form the initial data structure and also be able to access any balance_of_power for a time given as an argument.
Is there a way to do that with only modifying the accessor of pie value ?
EDIT
I changed the .value function to this:
.value(function(d) {
var h = d.history[0];
d.history.forEach(function(elt, i, a) {
console.log("======"); // start debug
console.log("search for:"+selected_time.toString());
console.log("current value:"+d.history[i].time.toString());
console.log("test:"+(d.history[i].time == selected_time));
console.log("======"); // end debug
if(d.history[i].time == selected_time) {
h = d.history[i];
}
});
return h.balance_of_power;
})
But the comparison always fails, even when the values seem to be identical, so the previous code always returns the initial value.
Here's what the javascript console shows for the last iteration:
====== final_balance_donut_chart.js?body=1:11
search for:Thu Jun 06 2013 16:06:00 GMT+0200 (CEST) final_balance_donut_chart.js?body=1:12
current value:Thu Jun 06 2013 16:06:00 GMT+0200 (CEST) final_balance_donut_chart.js?body=1:13
test:false final_balance_donut_chart.js?body=1:14
======
EDIT 2
For some reason I had to convert both times to string to make this work.
Here is the final code fore .value:
.value(function(d) {
var h = d.history[0];
d.history.forEach(function(elt) {
if(elt.time.toString() == selected_time.toString()) {
h = elt;
}
});
return h.balance_of_power;
})

Answer 1

Yes, your code would look something like this.
time = "...";
pie = d3.layout.pie()
.value(function(d) {
var h = d.history[0];
for(var i = 0; i < d.history.length; i++) {
if(d.history[i].time == time) {
h = d.history[i];
break;
}
}
return h.balance_of_power;
});
You will need to handle the case when the time is not in the history though.