鉴于以下用例：
我使用D3js渲染由AngularJS管理的对象.我想在D3图表中添加交互性.当点击svg元素时,我想有一种允许修改对象属性的弹出菜单. AngularJS需要这些属性,但D3不会呈现这些属性.
D3-Angular集成源自http://bl.ocks.org/biovisualize/5372077,它使用了闭包.
目前的实施：
截至今天,我使用angular-ui bootstrap的$modal服务来创建弹出菜单.从功能的角度来看,它的效果非常好：
单击svg元素时,D3将调度一个事件
该事件由Angular捕获,它调用$modal服务
在模态窗口中,我修改了对象属性
但是我对渲染不满意.我希望弹出菜单看起来像一个弹出窗口.它应该靠近被点击的svg元素放置.
据我了解,我有两个选择：
>继续使用$modal服务并修改其外观.应该采取什么方法？使用windowClass选项？
>停止使用$modal服务并开始攻击popover指令.问题是我不认为这是可能的
将这样的指令添加到svg元素.解决方案是
创建一个接近$modal服务的popover服务.
应该选择哪个选项？以及如何实施它？
编辑：
使用自定义my-popover指令工作plunker：
http://plnkr.co/edit/5KYvxi?p=preview
可以向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',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);
