Angular-ui + D3：如何实现上下文菜单（弹出框与模式）？

给出以下用例：

我使用 D3js 来渲染由 AngularJS 管理的对象。我想为 D3 图表添加交互性。当单击 svg 元素时，我希望有一种弹出菜单，允许修改对象属性。这些属性是 AngularJS 所必需的，但 D3 不会呈现。

D3-Angular 集成源自http://bl.ocks.org/biovisualize/5372077它使用了一个闭包。

目前的实施：

截至今天，我正在使用 angular-ui bootstrap 中的 $modal 服务来创建弹出菜单。从功能的角度来看，它的效果非常好： 单击 svg 元素时，D3 会调度一个事件 该事件被 Angular 捕获并调用 $modal 服务 在模式窗口中我修改对象属性

不过我对渲染效果并不满意。我希望弹出菜单看起来像弹出窗口。它应该放置在靠近被单击的 svg 元素的位置。

据我了解，我有两个选择:

1. 继续使用 $modal 服务并修改其外观。应该采取什么方法？使用 windowClass 选项？
2. 停止使用 $modal 服务并开始破解 popover 指令。问题是我认为这是不可能的 将这样的指令添加到 svg 元素。解决方案是 创建一个靠近 $modal 服务的弹出窗口服务。

应该选择哪个选项？以及如何实施？

EDIT:

使用自定义 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', 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