angularjs - Why are my SVG foreign object text not showing up? -
i trying collapse set of foreign objects 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 = * 100 + * 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 inspect dom looks correct not see text. missing?
looks transform not move viewable window. if add x/y foreign object instead works.
Comments
Post a Comment