Why are my SVG foreign object text not showing up? - angularjs

Question

I am trying to collapse a set of foreign objects so I do that like this.
$scope.render = function(center) {
$scope.direction = $scope.direction ? $scope.direction : "RL";
var nodes = $scope.container.selectAll(".subNode")
.data($scope.node.nodes);
nodes.exit().remove();
$scope.nodeElements = nodes.enter().append("g")
.attr({
class: "subNode",
})
$scope.nodeElements.append("foreignObject")
.attr("width", 300)
.attr("height", 100)
.append("xhtml:body")
.style("font", "14px 'Helvetica Neue'")
.html(function(d) {
return d.label
});
$scope.container.select("rect.mainNode")
.remove();
var mainNode = $scope.container.append("g")
.attr({
x: 0,
y: 0,
class: "mainNode",
})
.on({
click: function(d) {
$scope.open = !$scope.open;
$scope.container.selectAll(".subNode").transition()
.attr({
transform: function(d, i) {
var r = 0;
if ($scope.open) {
r = i * 100 + i * 10 + 110;
}
if ($scope.direction == "RL") {
return "translate(" + r + ", 0)"
} else {
return "translate(0, " + r + ")"
}
}
})
}
})
mainNode.append("foreignObject")
.attr("width", 10)
.attr("height", 10)
.append("xhtml:body")
.style("font", "14px 'Helvetica Neue'")
.html($scope.node.label);
mainNode.selectAll("foreignObject").transition()
.attr({
x: function(d, i) {
return 0
},
y: 0,
height: 100,
width: 300
});
}
When i inspect the DOM everything looks correct but I do not see the text. What am I missing?

Answer 1

Looks like the transform does not move the viewable window. If I add an x/y to the foreign object instead it works.