Myujth

I'm trying to build a sunburst diagram with an interactive slider. More specifically, I would like the slider, which is based on date, to appear and disappear slices in the sunburst according to the date associated with those slices.

I have created both the slider and the sunburst, but cannot get them to work together.

http://plnkr.co/edit/YIHd7o3fQ9RLFuN5PWVa?p=preview

I believe the problem lies in the 'updateData' function, which compares the date selected by the slider to the date associated with each datapoint. More specifically, the syntax obtaining the date of the slices appears to be incorrect, as it console.log() a "null" value.

Things I've tried:

To check syntax, I replaced d.data.Cattime with d.data.id. The latter logs the dataset information to the console - suggesting the syntax is correct. Strangely, this doesn't work with d.data.parentId.

I thought the problem might be that items under the Cattime heading is not represented as a date. But this code, console.log(parseDate(data[1].Cattime)); suggests that this is recognized as a date.

Any suggestions appreciated.

You should compare two date objects in your return statement.

svg.selectAll(".node").style("fill", function(d) 
 return new Date(((d.data.data.Cattime))) > new Date(h) ? "red" : "black";

Also, initially you are setting fill color of path as a style property, but in your update function you are setting it as an attribute.

Apparently, its value doesn't change when you set it as an attribute later on. So, either change update function to style or change your initialization to attribute.

working example