angularjs – Angular-ui D3：如何实现上下文菜单(popover vs mo

发布时间：2020-12-17 08:00:09 所属栏目：安全来源：网络整理

导读：鉴于以下用例：我使用D3js渲染由AngularJS管理的对象.我想在D3图表中添加交互性.当点击svg元素时,我想有一种允许修改对象属性的弹出菜单. AngularJS需要这些属性,但D3不会呈现这些属性. D3-Angular集成源自http://bl.ocks.org/biovisualize/5372077,它使用

鉴于以下用例：

我使用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);

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!