d3 .data() function not working as expected multiple data sources - d3.js

Question

I have a chart that works off two data sources and essentially the first [updateSetupData(data)] builds the elements the chart needs and the second [update(data)] does not append elements it only updates the html formed by the other function. I use an id as a key to keep things in sync.
function updateSetupData(data) {
var countsByParent = d3.nest()
.key(function (d) { return d.parent + '_tbl'; })
.key(function (d) { return d.SkillGroup + '_grp'; })
//.key(node => node.AgtName)
//.rollup(function(leaves) { return leaves.length;})
.entries(data);
var treeRoot = {
key: "root",
parent: null,
value: "100",
values: countsByParent };
var root = d3.hierarchy(treeRoot, function (d) { return d.values; })
.sum(function (d) { return d.value; });
// .sort(function(a, b) { return b.value - a.value; });
var nodes = pack(root);
//console.log(nodes);
var node = canvas.selectAll(".node")
.data(pack(root).descendants())
.enter().append("g")
.attr("class", function (d) {
return d.data.key == null ? "node " + d.data.AgtName + " agent " :
"node " + d.data.key;
})
.attr("id", function (d) { return d.data.AgtName + "a_" + d.data.AgtId +
"_s" + d.data.skillId + "_g" + d.data.groupId })
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y
+ ")"; })
.attr("fill", "steelblue")
.on("mouseover", function (d) {
highlight(d.label ? d.label : d.data.AgtName);
}).on("mouseout", function (d) { highlight(null); });
function highlight(agtName) {
if (agtName == null) d3.selectAll(".node").classed("active", false);
else d3.selectAll(".node." + agtName).classed("active", true);
}
node.append("circle")
.attr("r", function (d) { return d.r; })
// .attr("fill", "steelblue")
.attr("opacity", 0.25)
.attr("stroke", "#ADADAD")
.attr("stroke-width", "2");
node
.append("svg:title").text(function (d) { return d.data.AgtName; });
var arc = arcGenerator
.outerRadius(function (d, i) { return d.r; })
.startAngle(0)
.endAngle(180);
node.append('defs')
.append('path')
.attr("id", function (d, i) { return "s" + i; })
.attr("d", arc);
//.attr("d", function (d, i) { return getPathData(d.r); } );
node.append("text")
.attr("transform", "rotate(90)")
.attr("text-anchor", function (d) { return d.data.key == null ? "start"
: d.data.key.split("_") [1] === "tbl" ? "end" : "start"; })
.append("textPath")
.attr("startOffset", '50%')
.attr("xlink:href", function (d, i) { return '#s' + i; })
.attr("fill", function (d) { return d.data.key == null ? "none" :
d.data.key.split("_") [1] === "tbl" ? "blue" : "black"; })
.text(function (d) {
return d.data.key == null ? "" :
d.data.key == "root" ? "" : d.data.key.split("_")[0];
});
});
The second function is where I am having the issue. Even though I call .data() and have the new [different] data only used to overlay live calls on the static chart; The classed function just after the .data(data, key) works fine; the (d) there has the new data.
for the var text variable (d) in the data functions is from the other function, so the data to set the text with is wrong.
function update(data) {
var agent = canvas.selectAll(".node.agent")
//sets all elements to false for the class before the update
.classed("newCall", false)
.data(data, function (d) {
// the key is either an element id or an id from the data
var myId = d.id ? d.id : this.id;
// console.log("data key: " + d.id + " element id: " + this.id + "
new: " + d.newCall);
return myId;
}).classed("newCall", function (d) {
var f = d.newCall ? d.newCall : false;
//console.log(this.id + " " + f )
return f;
})
var text = agent.selectAll(".newCall text")
.attr("transform", null)
.attr("startOffset", null)
.attr("xlink:href", null)
.attr("fill", function (d) { return "black"; })
.attr("dx", function (d) { return -4;})
.attr("dy", function (d) { return 4; })
.text(function (d) {
console.log(d);
return "3";
});
Is there something I need to do with the text var to get the right data? I was thinking that because I call .data on the agents var that the text var in the would be OK since it appears that when I class the elements the data is there.

Answer 1

Including the whole fixed function. First the data and classes are cleared then the new data is added. The text elements for agent.newCall are updated when the function runs.
function update(data) {
var agent = canvas.selectAll(".node.agent");
// clear call data
agent.select("text").text("");
// sets all elements to false for the class before the update
agent.classed("newCall", false)
.data(data, function (d) {
// the key is either an element id or an id from the data
var myId = d.id ? d.id : this.id;
// console.log("data key: " + d.id + " element id: " + this.id + " new: " + d.newCall);
return myId;
}).classed("newCall", function (d) {
var f = d.newCall ? d.newCall : false;
//console.log(this.id + " " + f )
return f;
})
agent
.select(".newCall text")
.attr("transform", null)
.style("text-anchor", "middle")
.attr("dy", function (d) { return 4; })
.attr("fill", "black")
.style("font-size", function (d) { return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 24) + "px"; })
.text(function (d) {
var txt = d.Calls ? d.Calls.length > 0 ? d.Calls.length : "" : "";
return txt;
});
agent.enter().append("g")
.classed("newCall", function (d) {
return d.newCall ? d.newCall : false;
});
agent.exit().classed("newCall", function (d) {
// console.log(d);
return false;
});
};