I'm using dc.js / d3.js, and trying to make the charts responsive to
browser resize events. I wrote a quick directive to fix the issue - when
the browser resizes, the charts won't resize (width) to fill the parent.
I have the following structure, and I added the resize directive as an
attribute on the svg element
<div id='mychart'>
<svg svg-resize chart='charts.mychart' selector='mychart'>
/* svg chart stuff */
</svg>
</div>
directive code
angular.directive('svgResize', ['$window', function ($window) {
return {
restrict: 'A',
scope: { chart: '=' },
link: function (scope, elem, attrs) {
// set the svg.width to 100% and force a redraw of the chart
function resize() {
// does not work => elem.attr('width', '100%');
// does not work => elem[0].setAttribute('width', '100%');
// does not work => d3.select(elem[0]).attr('width', '100%');
// does work
d3.select(attrs.selector + ' svg').attr('width', '100%');
scope.chart.redraw();
}
$window.addEventListener('resize', _.debounce(resize, 300));
};
}]);
The comments relate to the question I have. Even though I appear to be
passing the svg dom element (wrapped in angular.element) into the linking
function, setting attributes on svg just doesn't seem to work. None of the
methods commented out work. The width attribute on the svg element remains
unaffected (no errors), and I'm wondering why, exactly?
This led to me passing the css id selector into the directive as an attr,
so I could just find it with d3.select(attrs.selector + ' svg'), which
works, but it is ugly and feels wrong.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
