Question

我使用指令在数据数组上使用ng-repeat实现不同的D3图。在创建D3元素的最后，我计算图形的高度并相应地更新父DIV。

第一次打开页面时，父div的高度未正确更新。将视图切换到另一个类别时一切正常。

重复是非常直接的＆＃34;网格项目＆＃34;应该更新

<li ng-repeat="var in cards.variables" class="grid">
  <div class="grid-item" grid-block data="var"></div>
</li>

这是我用于创建D3元素的指令。我在渲染后尝试使用范围。$ apply（）但这导致$ digest已在进行中。使用$ timeout来渲染图形似乎也没有任何效果。

.directive('gridBlock', function(d3Service, WrapService) {
  return {
    restrict: 'EA',
    scope: {
      data: '='
    },
    link: function(scope, element, attrs) {
      d3Service.d3().then(function(d3) {
        // Set dimensions
        var width = 100;
        var height = 0;

        // Create d3 element
        var svg = d3.select(element[0])
        .append('svg')
          .attr('width', width)

        scope.render = function(data) {
          // Remove previous render
          svg.selectAll('*').remove();

          var header = svg.append('text')
            .text(data.value);

          height += header.node().getBBox().height;

          switch(data.variable.type) {
           case 1:
              // Absolute
              var body = svg.append('rect')
                .attr('y', height)
                .attr('width', width)
                .attr('height', 100)
                .attr('fill', '#E6E7E8');

              height += body.node().getBBox().height + 10;
              break;
          case 2:
            ...
            break;
          }

          var desc = svg.append('text')
            .attr('x', 0)
            .attr('y', height)
            .text(data.variable.label  + ' in ' + data.year)

          height += desc.node().getBBox().height;
          width = desc.node().getBBox().width;

          // Set dimensions on svg, width only when +100
          svg.attr('height', height);
          if (width > 100) {
            svg.attr('width', width);
          }

          // Set dimensions on parent
          element.css({'width': width + 'px', 'height': height + 'px'});
        };

        // Render visualisation
        scope.render(scope.data);

      });
    }
  };
})

参见图片示例：

Graph elements with incorrect height

Graph elements with correctly updated height

Answer 1

我没有设法解决问题本身，但通过使用CSS列找到了我的项目的解决方案。所有元素都已正确加载，实际上现在通过D3更改高度后。

Angular Directive在第一次加载时不更新DOM

1 个答案: