响应d3区域

时间：2015-06-16 11:18:39

标签： angularjs d3.js responsive-design

我是d3的新手并试图混淆我看过的一些样品，然后像我几乎破解它一样填充。

我正在努力让这个领域做出回应。

我正在调整resize事件并重新计算外半径，但由于某种原因，ui不会更新。

  

全屏查看以播放窗口大小

// Generated by CoffeeScript 1.8.0
(function() {
  var app;

  app = angular.module('infra');

  app.directive('channelSelectivity', function() {
    var link;
    link = function(scope, element, attrs) {
      var data, el, height, resize, type, update, width;
      el = element[0];
      width = el.clientWidth;
      height = el.clientHeight;
      data = [
        {
          "key": 'a',
          "value": 17,
          "time": 0,
          audience: "Man"
        }, {
          "key": 'a',
          "value": 22,
          "time": 1,
          audience: "Man1"
        }, {
          "key": 'a',
          "value": 47,
          "time": 2,
          audience: "Man2"
        }, {
          "key": 'a',
          "value": 97,
          "time": 3,
          audience: "Man3"
        }, {
          "key": 'a',
          "value": 100,
          "time": 4,
          audience: "Man"
        }
      ];
      resize = function() {
        var angle, area, innerRadius, l, layers, line, max, min, nest, outerRadius, radius, stack, svg, svg_root, z;
        svg = void 0;
        radius = d3.scale.linear();
        outerRadius = Math.min(width, height) / 2 - 20;
        radius.range([0, outerRadius]);
        angle = d3.scale.linear().range([0, 2 * Math.PI]);
        z = d3.scale.category20c();
        stack = d3.layout.stack().offset('zero').values(function(d) {
          return d.values;
        }).x(function(d) {
          return d.time;
        }).y(function(d) {
          return d.value;
        });
        nest = d3.nest().key(function(d) {
          return d.key;
        });
        line = d3.svg.line.radial().interpolate('cardinal-closed').angle(function(d) {
          return angle(d.time);
        }).radius(function(d) {
          return radius(d.y0 + d.y);
        });
        max = void 0;
        min = void 0;
        innerRadius = 0;
        svg_root = d3.select(element.find('svg')[0]);
        svg_root.attr("width", width).attr("height", height).append('g');
        layers = stack(nest.entries(data));
        svg = d3.selectAll('g').data(layers);
        svg.enter().append('g').attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        svg.exit().remove();
        angle.domain([
          0, d3.max(data, function(d) {
            return d.time + 1;
          })
        ]);
        outerRadius = Math.min(width, height) / 2 - 20;
        svg_root.attr("width", width).attr("height", height);
        svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        radius.range([0, outerRadius]);
        radius.domain([
          0, d3.max(data, function(d) {
            return d.y0 + d.y;
          })
        ]);
        area = d3.svg.area.radial().interpolate('cardinal-closed').angle(function(d) {
          return angle(d.time);
        }).innerRadius(function(d) {
          return radius(d.y0);
        }).outerRadius(function(d) {
          return radius(d.y0 + d.y);
        });
        l = svg.selectAll('.layer').data(layers);
        l.enter().append('path').attr('class', 'layer').attr('d', (function(d) {
          return area(d.values);
        })).style('fill', (function(d, i) {
          return z(i);
        }));
        return l.exit().remove();
      };
      update = function(data, oldData) {
        return resize();
      };
      type = function(d) {
        d.time = +d.time;
        d.value = +d.value;
        return d;
      };
      scope.$watch('data', update);
      return scope.$watch((function() {
        return el.clientWidth * el.clientHeight;
      }), (function() {
        width = el.clientWidth;
        height = el.clientHeight;
        return resize();
      }));
    };
    return {
      template: '<svg></svg>',
      restrict: 'AE',
      scope: {
        data: '=',
        max: '=',
        min: '='
      },
      link: link
    };
  });

}).call(this);

//# sourceMappingURL=channelSelectivityDirective.js.map
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        html{
            height: 100%;
            width: 100%;
        }

        body {
            font: 10px sans-serif;
            height: 100%;
            width: 100%;
        }

        .axis line {
            stroke: #000;
        }

        .axis path {
            fill: none;
            stroke: #000;
        }

        .axis + .axis g text {
            display: none;
        }

        channel-selectivity{
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }


    </style>

</head>
<body ng-app="infra" ng-controller="MainCtrl">
    <channel-selectivity data="dats"></channel-selectivity>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
    var app = angular.module('infra', []);
    app.controller('MainCtrl', function ($scope, $window, $interval){
        $scope.dats =[];
        angular.element($window).on('resize', $scope.$apply.bind($scope));
    });
</script>

</html>

1 个答案:

答案 0 :(得分：1)

你错过了一件小事，首先从svg中删除所有旧的svg元素。

我在获取svg_root add svg_root.selectAll('*').remove();后添加了一行代码更新了您的代码段，这将允许渲染已调整大小的元素。

＆＃13;
＆＃13; 
// Generated by CoffeeScript 1.8.0
(function() {
  var app;

  app = angular.module('infra');

  app.directive('channelSelectivity', function() {
    var link;
    link = function(scope, element, attrs) {
      var data, el, height, resize, type, update, width;
      el = element[0];
      width = el.clientWidth;
      height = el.clientHeight;
      data = [
        {
          "key": 'a',
          "value": 17,
          "time": 0,
          audience: "Man"
        }, {
          "key": 'a',
          "value": 22,
          "time": 1,
          audience: "Man1"
        }, {
          "key": 'a',
          "value": 47,
          "time": 2,
          audience: "Man2"
        }, {
          "key": 'a',
          "value": 97,
          "time": 3,
          audience: "Man3"
        }, {
          "key": 'a',
          "value": 100,
          "time": 4,
          audience: "Man"
        }
      ];
      resize = function() {
        var angle, area, innerRadius, l, layers, line, max, min, nest, outerRadius, radius, stack, svg, svg_root, z;
        svg = void 0;
        radius = d3.scale.linear();
        outerRadius = Math.min(width, height) / 2 - 20;
        radius.range([0, outerRadius]);
        angle = d3.scale.linear().range([0, 2 * Math.PI]);
        z = d3.scale.category20c();
        stack = d3.layout.stack().offset('zero').values(function(d) {
          return d.values;
        }).x(function(d) {
          return d.time;
        }).y(function(d) {
          return d.value;
        });
        nest = d3.nest().key(function(d) {
          return d.key;
        });
        line = d3.svg.line.radial().interpolate('cardinal-closed').angle(function(d) {
          return angle(d.time);
        }).radius(function(d) {
          return radius(d.y0 + d.y);
        });
        max = void 0;
        min = void 0;
        innerRadius = 0;
        svg_root = d3.select(element.find('svg')[0]);
        svg_root.selectAll('*').remove();
        svg_root.attr("width", width).attr("height", height).append('g');
        layers = stack(nest.entries(data));
        svg = d3.selectAll('g').data(layers);
        svg.enter().append('g').attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        svg.exit().remove();
        angle.domain([
          0, d3.max(data, function(d) {
            return d.time + 1;
          })
        ]);
        outerRadius = Math.min(width, height) / 2 - 20;
        svg_root.attr("width", width).attr("height", height);
        svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        radius.range([0, outerRadius]);
        radius.domain([
          0, d3.max(data, function(d) {
            return d.y0 + d.y;
          })
        ]);
        area = d3.svg.area.radial().interpolate('cardinal-closed').angle(function(d) {
          return angle(d.time);
        }).innerRadius(function(d) {
          return radius(d.y0);
        }).outerRadius(function(d) {
          return radius(d.y0 + d.y);
        });
        l = svg.selectAll('.layer').data(layers);
        l.enter().append('path').attr('class', 'layer').attr('d', (function(d) {
          return area(d.values);
        })).style('fill', (function(d, i) {
          return z(i);
        }));
        return l.exit().remove();
      };
      update = function(data, oldData) {
        return resize();
      };
      type = function(d) {
        d.time = +d.time;
        d.value = +d.value;
        return d;
      };
      scope.$watch('data', update);
      return scope.$watch((function() {
        return el.clientWidth * el.clientHeight;
      }), (function() {
        width = el.clientWidth;
        height = el.clientHeight;
        return resize();
      }));
    };
    return {
      template: '<svg></svg>',
      restrict: 'AE',
      scope: {
        data: '=',
        max: '=',
        min: '='
      },
      link: link
    };
  });

}).call(this);

//# sourceMappingURL=channelSelectivityDirective.js.map
＆＃13; 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        html{
            height: 100%;
            width: 100%;
        }

        body {
            font: 10px sans-serif;
            height: 100%;
            width: 100%;
        }

        .axis line {
            stroke: #000;
        }

        .axis path {
            fill: none;
            stroke: #000;
        }

        .axis + .axis g text {
            display: none;
        }

        channel-selectivity{
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }


    </style>

</head>
<body ng-app="infra" ng-controller="MainCtrl">
    <channel-selectivity data="dats"></channel-selectivity>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
    var app = angular.module('infra', []);
    app.controller('MainCtrl', function ($scope, $window, $interval){
        $scope.dats =[];
        angular.element($window).on('resize', $scope.$apply.bind($scope));
    });
</script>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题