给定以下用例:
我使用D3js渲染由AngularJS管理的对象。我想向D3图表添加交互性。当单击svg元素时,我希望有一种弹出菜单允许修改对象属性。这些属性是AngularJS必需的,但不是D3呈现的。
D3-Angular集成源自使用闭包的http://bl.ocks.org/biovisualize/5372077。
当前实施:
从今天开始,我正在使用angular-ui引导程序中的$ modal服务创建弹出菜单。从功能角度来看,它工作得很好:当单击svg元素时,D3调度一个事件该事件被Angular捕获,该事件调用$ modal服务在模式窗口中,我修改了对象属性
但是我对渲染不满意。我希望弹出菜单看起来像一个弹出框。应将其放置在靠近单击的svg元素附近。
据我了解,我有 两种选择 :
应该选择哪个选项?以及如何实施?
编辑:
使用自定义的my-popover指令工作的监听器:http ://plnkr.co/edit/5KYvxi?p=preview
可以在由生成的代码中添加指令d3,只需确保$compile在呈现内容后调用服务即可。
d3
$compile
对于给定的示例,它看起来像这样:
.directive('barChart', function($compile){ // inject $compile var chart = d3.custom.barChart(); return { restrict: 'E', replace: true, template: '<div class="chart"></div>', scope:{ height: '=height', data: '=data', hovered: '&hovered' }, link: function(scope, element, attrs) { var chartEl = d3.select(element[0]); chart.on('customHover', function(d, i){ scope.hovered({args:d}); }); scope.$watch('data', function (newVal, oldVal) { chartEl.datum(newVal).call(chart); $compile(element.contents())(scope); // <-- call to $compile }); scope.$watch('height', function(d, i){ chartEl.call(chart.height(scope.height)); $compile(element.contents())(scope); // <-- call to $compile }) } }
并在d3的绘图功能中:
bars.enter().append('rect') .classed('bar', true) .attr('myPopover', 'Text to show') // <-- Adding an attribute here. .attr({x: chartW, width: barW, y: function(d, i) { return y1(d); }, height: function(d, i) { return chartH - y1(d); } }) .on('mouseover', dispatch.customHover);
Demo