css - 如何在离散条形图条上放置 MouseOver 事件

Question

我正在尝试使用来自此处的 NVD3 Angular Directive(指令)创建条形图:http://krispo.github.io/angular-nvd3/#/

我使用的图表是这个:http://krispo.github.io/angular-nvd3/#/discreteBarChart

这是我在页面上创建图表的 html(在这种情况下上下文似乎并不重要):

                    <nvd3 options="options"
                          data="top10bar"
                          ng-mouseenter="mouseEnterEvent($event)"></nvd3>

这是 Controller 代码(标签位于其中)

app.controller('BarChartController', function ($scope) {

$scope.options = {
    chart: {
        type: 'discreteBarChart',
        height: 350,
        margin: {
            top: 20,
            right: 20,
            bottom: 60,
            left: 55
        },
        width: 500,
        x: function (d) {
            return d.label;
        },
        y: function (d) {
            return d.value;
        },
        showValues: true,
        transitionDuration: 500,
        xAxis: {
            axisLabel: 'X Axis'
        },
        yAxis: {
            axisLabel: 'Y Axis',
            axisLabelDistance: 30
        },
        tooltips: false,
        discretebar: {
            rectClass: ['discreteBar', 'tableRow']
        },
        interactive: true
    }
};

$scope.mouseEnterEvent = function (event) {

    console.log("EVENT!");
    console.log(event);
};

$scope.$on('elementMouseover.tooltip', function (event, data) {
    console.log("In scope.on");
    console.log(event);
    console.log(data);
    console.log("end");
});

$scope.$on('tooltipShow.directive', function (angularEvent, event) {
    angularEvent.targetScope.$parent.event = event;
    angularEvent.targetScope.$parent.$digest();
});

在 Controller 底部可以看到的三个事件处理程序中，只有第一个有效，因为我在 nvd3 中指定了一个 ng-mouseenter 选项。但是，当鼠标进入整个图表 div 时，这会起作用。我想要的是检测鼠标悬停在单个栏上，以便我可以突出显示它，然后突出显示我 View 的另一部分。

您将如何着手实现我在这里想要实现的目标？ 非常感谢任何帮助，干杯!

Answer 1

我遇到了同样的问题，为了检测栏上的事件，我编写了以下内容。

$scope.mouseEnterEvent = function (event) {
    if (event.target.localName === 'rect') {
        /// Do your operation here.
    }
};

它对我有用。希望它能对您有所帮助，如果您找到更好的方法将事件传递给图表本身，请告诉我。