我是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>
答案 0 :(得分:1)
你错过了一件小事,首先从svg中删除所有旧的svg元素。
我在获取svg_root add svg_root.selectAll('*').remove();
后添加了一行代码更新了您的代码段,这将允许渲染已调整大小的元素。
// 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;