Jackie February 2016

Why are my SVG foreign object text not showing up?

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?

Answers


Jackie February 2016

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

Post Status

Asked in February 2016
Viewed 3,653 times
Voted 12
Answered 1 times

Search




Leave an answer