Zoomable D3 Angular Treemap指令

Question

我似乎找不到可重复使用的D3 Angular Treemap指令，它像Mike Bostock的here那样缩放。如果有人在过去创建了一个，或者可以给我任何有关我能找到的地方的信息，我会非常感激！

哎呀，它也不一定是D3，我只需要在角度项目中使用它。

谢谢！

Answer 1

你需要在html中创建一个这样的div，我们将挂钩我们的treemap：

<div linear-chart></div>

接下来制作一个指令来映射线性图表属性：

app.directive('linearChart', function() {
  return {
    restrict: 'EA',

    link: function(scope, elem, attrs) {
      var root = scope.data;
      //here you make your svg to the elem
      var svg = d3.select(elem[0]).append("svg")
      //tree map code
    }

在链接功能中，您可以复制example代码，以便将树图挂钩到元素，如上所示。

完整的工作代码here

希望这有帮助！