I have been on a thorough search to find the issue in my code, but sadly I haven't been able to identify it. Please forgive me if there's something obvious that I'm missing.
The JSON object I am working with is structured like this:
var data={
"by_date":[
{"date":"2014-01-01", "count":10},
{"date":"2014-02-01", "count":20},
{"date":"2014-03-01", "count":30},
{"date":"2014-04-01", "count":15},
{"date":"2014-05-01", "count":20}
],
"by_location": {
"name":"World","children":[
{
"name":"United States", "children":[{"name":"New York", "children":[{"name":"Albany","count":5}, {"name":"NYC","count":5}]}]
},
{
"name":"Canda", "children":[
{
"name":"Alberta", "children":[{"name":"Edmonton","count":5},{"name":"Calgary","count":5}]
},
{
"name":"British Columbia", "children":[{"name":"Victoria","count":2},{"name":"Vancouver","count":8}]
}
]
},
{
"name":"China", "children":[{"name":"Beijing","count":30}]
},
{
"name":"India", "children":[{"name":"Bangalore","count":15}]
},
{
"name":"Germany", "children":[{"name":"Frankfurt","count":20}]
}
]
}
};
My goal is to showcase a line chart using data from data.by_date and a zoomable circlepack from data.by_location simultaneously on one HTML page. I have two Javascript functions, by_date, responsible for creating the line chart, and by_location, designed for generating the circlepack. Both these functions mirror Mike Bostock's line chart and zoomable circlepack examples. Here's how I call them:
by_date(data.by_date);
by_location(data.by_location); // Circlepack displays, but zoom feature doesn't work.
The issue arises when although both the line chart and the circlepack are successfully displayed on the page, the zoom functionality fails to function properly on the circlepack, triggering the following error:
Uncaught TypeError: Cannot read property 'parent' of undefined
Strangely, if I comment out the by_date call and only execute by_location, everything works seamlessly.
// by_date(data.by_date);
by_location(data.by_location); // Zoom feature now operates smoothly!
Given that by_date strictly utilizes data.by_date and does not interact with data.by_location at all, why would omitting it make by_location operate correctly?
Below are fiddles illustrating the problem:
Both the line chart and the circlepack (where zooming malfunctions): http://jsfiddle.net/xk5aqf8t/6/
With the line chart function by_date commented out (zoom feature works flawlessly): http://jsfiddle.net/38sayeqa/
Please note that the sole disparity between the two fiddles is the absence of the call to by_date.
Your assistance is immensely valued. Thank you in advance!