棱角分明的UI + D3：如何实现上下文菜单（酥料饼VS模式）？ [英] Angular-ui + D3: how to implement contextual menu (popover vs modal)?

问题描述

考虑下面的用例：

我用D3js渲染这是由AngularJS管理的对象。我想添加交互到D3图。当一个SVG元素上点击我想有一种弹出菜单，允许修改对象的属性。这些属性由AngularJS必需的，但不会被渲染D3

I use D3js to render objects which are managed by AngularJS. I would like to add interactivity to the D3 chart. When clicking on a svg element I would like to have a kind of popup menu allowing to modify the object properties. These properties are required by AngularJS but are not rendered by D3.

该D3-角度积分从 http://bl.ocks.org/biovisualize/5372077 <派生/ A>它采用了封闭。

The D3-Angular integration is derived from http://bl.ocks.org/biovisualize/5372077 which uses a closure.

当前实现：

截至今天我使用从角度的用户界面的引导模式$服务来创建弹出菜单。从一个functionnality点它的工作原理pretty得好：
    当一个SVG元素上点击，D3调度一个事件
    这一事件是由角它调用$模式服务逮住
    在模态窗口，我修改对象的属性。

As of today I am using the $modal service from angular-ui bootstrap to create the popup menu. From a functionnality point of view it works pretty well: When clicking on a svg element, D3 dispatches an event That event is catched by Angular which calls the $modal service Within the modal window I modify the object properties

不过，我不满意的渲染。我想在弹出菜单看起来像一个酥料饼。应该放置在靠近它被点击的SVG元素。

However I am not satisfied with the rendering. I would like the popup menu to look like a popover. It should be placed close to the svg element which was clicked.

据我了解，我的两个选项

1. 继续使用$模式服务，并修改其外观。什么方法应采取？使用windowClass选项？


2. 停止使用$模式服务，并开始对黑客的酥料饼指令。问题是，我不认为这是可能的
   这样的指令添加到SVG元素。的解决办法是将
   创建接近$模式服务酥料饼的服务。

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

Which option should be chosen? and how to implement it?

编辑：

使用自定义我，酥料饼的指令工作plunker：
http://plnkr.co/edit/5KYvxi?p=$p$pview

Working plunker using a custom my-popover directive: http://plnkr.co/edit/5KYvxi?p=preview

推荐答案

这是可能的一个指令添加到由 D3 产生code，只有你需要的东西保证是你所说的 $编译 服务上的内容之后，已经呈现

It is possible to add a directives to code generated by d3, only thing you need to ensure is that you call the $compile service on the content after it has been rendered.

对于给定的例子中，它看起来是这样的：

For the given example, it would look something like this:

    .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);

<大骨节病>演示

这篇关于棱角分明的UI + D3：如何实现上下文菜单（酥料饼VS模式）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！