Changing JSON files in d3js force visualizaition - json

Question

Ok I have found a couple of resources that have tried to load two datasources using d3js. Unfortunately they don't seem to solve the problem I having.
Essentially what I am trying to do is create a force layout with nodes and links and have the ability to change datasources via a selection from a drop down menu.
Here are the basics...I retrieve all nodes and links from and external file using d3.json. Everything works perfectly and I have even animated the visualization to cycle through the different dates for each node. My problem is, now I am trying to expand on the functionality of this visualization...I want to be able to select a .json file from a dropdown menu and then reload the visualization with the new data. Basically providing the user to view several different visualizations of completely different data.
All the concepts appear to be working except for when I redraw the visualization using the new data file, some nodes appear and float off on their own not linking to the the original node. I forgot the first 7 nodes I have hard coded their x, y coordinates to be in the middle of the visualization and every node after that uses the force functionality to place themselves depending on what they are linked to.
Here is some code
$("#customer").change(function(){ // this is the dropdown menu
$("#customer option:selected").each(function () {
var line = d3.selectAll("line").remove(); // remove all links on screen
var g = d3.selectAll("g").remove(); // remove all nodes on screen
dataFile = this.innerHTML; // changes variable used in d3.json
change(); // calls function wrapper that contains d3.json
});
function change(){
d3.json(dataFile, function(fileData){
rtm = new Object(); // initialize dictionary object
dates = []; // initialize dates[] array to contain all dates in data
var node = {}; // node object
// traverse through data contained in file
for(var i = 0; i < fileData.nodes.length; i++){
node = fileData.nodes[i]; // assign current node to node object
node.date = new Date(node.date);
rtm[node.id] = node; // add node object to dictionary object
// check if date exists in dateArray
if(findDate(node.date, dates)){
dates.push(node.date); // add dates that don't exist
}
}
getNodes(fileData.nodes[0].date); // finds the nodes to be visualized and updates the array passed to force.nodes()
getLinks(fileData.nodes[0].date); // finds the nodes to be visualized and updates the array passed to force.links()
start(); // initiates visualization after d3.json() finishes
});
}
// function controls visualization. Uses d3.js framework to control visualization
// must be called from within d3.json for first initialization or nothing will render
function start(){
// stop force functionality to allow for removal and adding of new objects
force.stop();
// remove all elements inside visualization
var line = d3.selectAll("line").remove(); // remove all links on screen
var g = d3.selectAll("g").remove(); // remove all nodes on screen
// create any links needed, dependent on links contained links[] array
// selects links already created or adds new links.
link = svg.selectAll("line.link")
.data(force.links(), function(d){ return d.id;}) // 2nd parameter can be added to use as a comaparison for pairing existing links with identical same data
link.enter().append("line") // new data will be bound to a new line. 2nd parameter in .data() allows for element reuse
// instead of creation, otherwise data and line elements are matched on index. If those
// two don't match then a new element is created.
.attr("class", "link") // assigns .link class to link element to allow for css styling
//.style("stroke-opacity", .5)
.style("stroke-width", 8)
.style("stroke", function(d){
return d.target.id > 7 ? (d.target.fraud ? "Red" : "#35586C") : "Grey";
});
link.exit().remove(); // removes any links removed from links[] array
// create any nodes needed, dependent on data contained in .data()
// selects nodes already created or adds new nodes. matches nodes to data
node = svg.selectAll(".node")
.data(force.nodes(), function(d){ return d.id;}) // 2nd parameter can be added to use as a comaparison for pairing existing node with identical same data
node.enter().append("g") // new data will be bound to a new node. 2nd parameter in .data() allows for element reuse
// instead of creation, otherwise data and node elements are matched on index. If those
// two don't match, a new element is created.
.attr("class", "node") // assigns .node class to node element to allow for css styling
.call(force.drag); // allows for nodes to be dragged and moved. x,y coordinates will adjust to movement
//.transition().duration(10000).delay(10000); // transitions any new nodes into the visualization
node.exit().remove(); // removes any nodes removed from nodes[] array
node.append("image")
.attr("xlink:href", function(d){
// add path for image of each node
var path = "images/";
if(!d.fraud){ // check if fraudulent node
if(d.name == "Record"){
path += "record-G.gif";
return path;
}
if(d.id <= 7){
path += "Record/";
}else {
path += "Linked/";
}
if(d.name == "SSN"){
path += "SSN.png";
}else if(d.name == "Name"){
path += "Name.png";
}else if(d.name == "Address"){
path += "Address.png";
}else if(d.name == "Phone"){
path += "Phone.png";
}else if(d.name == "DOB"){
path += "DOB.png";
}else if(d.name == "Email"){
path += "Email.png";
}else if(d.name == "Record"){
path += "record-G.gif";
}else if(d.name == "App"){
path += "App.png";
}else {
path += "nan.gif";
}
}else {
path += "FraudApp.png"
}
return path;
})
.attr("class", "image")
.attr("x", function(d){ return d.name == "Record" ? -30 : -20})
.attr("y", function(d){ return d.name == "Record" ? -30 : -20})
.attr("height", function(d){ return d.name == "Record" ? 60 : 40})
.attr("width", function(d){ return d.name == "Record" ? 60 : 40});
force.start(); // restart force functionality
}
I have no idea if any of this makes sense. A quick synopsis: I want to provide functionality to change .json files and redraw(start over) the visualization with the data contained in the that .json file.