Question

我正在尝试折叠一组外来对象，所以我这样做就像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
      });
  }

当我检查DOM时，一切看起来都正确但我看不到文字。我错过了什么？

Answer 1

看起来变换不会移动可视窗口。如果我将x/y添加到外部对象而不是它可以工作。

为什么我的SVG外来对象文本没有显示？

1 个答案: