使用d3.js SVG clipPath在角不削波 [英] Using d3.js svg clipPath not clipping in Angular
问题描述
我开发一个图表，是合租类似于下面的例子：
http://bl.ocks.org/mbostock/1667367 它使用clipPath这样的区域图并裁剪的区域不会溢出轴。
I am developing a graph that's vey similar to following example: http://bl.ocks.org/mbostock/1667367 where it uses clipPath to clip the area so the area graph does not overflow the axis.
在它的作品几乎全部正常，但裁剪的角度指令使用相同的例子。当使用聚焦特性，从图中的线溢出剪辑矩形的极限。
Using the same example in an Angular directive it works almost all properly but the clipping. When using the focus feature, the line from the graph overflows the limits of the clip rectangle.
不过的jsfiddle同一code正常工作 http://jsfiddle.net/gserra/TXYGH/ 。在该指令中提到的code是以下内容：
But the same code in jsFiddle works properly http://jsfiddle.net/gserra/TXYGH/. The mentioned code in the Directive is the following:
angular.module('casApp.directives', []).
directive('lineChart', ['d3', '_', 'moment', function (d3, _, moment) {
var margin = {top: 10, right: 10, bottom: 100, left: 40};
var margin2 = {top: 430, right: 10, bottom: 20, left: 40};
return {
restrict: 'E',
replace: true,
scope: {
data: '=',
stream: '=',
start: '=',
end: '=',
period: '@',
unit: '@',
sensor: '@',
width: '@',
height: '@'
},
template: '<div class="line-chart"></div>',
controller:'DataCtrl',
link: function (scope, element) {
var height = scope.height - margin.top - margin.bottom,
height2 = scope.height - margin2.top - margin2.bottom,
width = scope.width - margin.left - margin.right;
scope.updateTime();
var x = d3.time.scale()
.domain([scope.start, scope.end])
.range([0, width]);
var x2 = d3.time.scale()
.domain(x.domain())
.range([0, width]);
var min = d3.min(scope.data, function (d) {return d.value; })
var max = d3.max(scope.data, function (d) {return d.value; })
var thres = Math.abs(max-min);
var y = d3.scale.linear()
.domain([min - thres, max + thres])
.range([height, 0]);
var y2 = d3.scale.linear()
.domain(y.domain())
.range([height2, 0]);
var line = d3.svg.line()
.x(function (d) {
return x(moment(d.at));
})
.y(function (d) {
return y(d.value);
});
var line2 = d3.svg.line()
.x(function (d) {
return x2(moment(d.at));
})
.y(function (d) {
return y2(d.value);
});
var graph = d3.select(element[0])
.append('svg')
.attr('width', scope.width)
.attr('height', scope.height);
var xAxis = d3.svg.axis().scale(x).orient('bottom'),
xAxis2 = d3.svg.axis().scale(x2).orient('bottom'),
yAxis = d3.svg.axis().scale(y).orient('left');
var brush = d3.svg.brush()
.x(x2)
.on('brush', brushed);
var focus = graph.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var context = graph.append('g')
.attr('transform', 'translate(' + margin2.left + ',' + margin2.top + ')');
focus.append('defs').append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', width)
.attr('height', height);
focus.append('g')
.data([scope.data])
.attr('clip-path', 'url(#clip)')
.append('path')
.attr('d', line)
.attr('class', 'line');
focus.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
focus.append('g')
.attr('class', 'y axis')
.call(yAxis);
context.append('path')
.data([scope.data])
.attr('d', line2)
.attr('class', 'line');
context.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height2 + ')')
.call(xAxis2);
context.append('g')
.attr('class', 'x brush')
.call(brush)
.selectAll('rect')
.attr('y', -6)
.attr('height', height2 + 7);
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select('path.line').attr('d', line);
focus.select('.x.axis').call(xAxis);
}
function updateGraph () {
// update x axis
x.domain([scope.start, scope.end]);
x2.domain([scope.start, scope.end]);
xAxis.scale(x);
xAxis2.scale(x2);
focus.selectAll('g.x.axis').call(xAxis);
context.selectAll('g.x.axis').call(xAxis2);
// update y axis
var min = d3.min(scope.data, function (d) {return d.value; })
var max = d3.max(scope.data, function (d) {return d.value; })
var thres = Math.abs(max-min);
y.domain([min - thres, max + thres]);
y2.domain([min - thres, max + thres]);
yAxis.scale(y);
focus.selectAll('g.y.axis').call(yAxis);
//update line
focus.selectAll('path.line')
.data([scope.data])
.attr('d', line);
context.selectAll('path.line')
.data([scope.data])
.attr('d', line2);
}
scope.$watch('data', function () {
var last = scope.data.length > 0 ? moment(_.last(scope.data).at) : null;
if (last && last > scope.end) {
scope.updateTime(last, moment(last).add(scope.unit, scope.period));
scope.data = [_.last(scope.data)];
}
updateGraph();
});
}
};
}]).
directive('paginator', function () {
return {
controller: 'DataCtrl',
restrict: 'E',
template: '<button class="forward" ng-disabled="stream" ng-click="forward()">Page up</button>' +
'<button class="back" ng-click="back()">Page down</button>'
};
});
该图是在控制器使用socket.io自动更新。我试过没有成功DEFS重视SVG而不是G。任何想法？
The graph is updated automatically using socket.io in a controller. I've tried without success to attach defs to "svg" instead of "g". Any ideas?
我使用的角度1.2.2
I am using Angular 1.2.2
推荐答案
最后，在另一个文件中隔离code和simplifing后，我发现了什么是负责任的这种奇怪的行为：
Finally after isolating the code in another file and simplifing it, I've found what was the responsible of this strange behaviour:
在＆LT; HEAD＆GT; 我有：
<head>
<meta charset="utf8">
<title>Real time context aware graphics display</title>
<link rel="stylesheet" href="/stylesheets/app.css">
<link rel="stylesheet" href="/stylesheets/graph.css"><base href="/">
<base href="/">
<style type="text/css"></style>
</head>
广告时，我删除了＆LT;基本href =/＆GT; 所有工作完美。我不知道确切的原因。
Ad when I removed the <base href="/"> all worked perfectly. I do not know exactly the reason.
这篇关于使用d3.js SVG clipPath在角不削波的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
