防止角度 nvD3 堆积面积图中的点击事件答案

【问题标题】：Prevent click event in angular nvD3 Stacked Area Chart防止角度 nvD3 堆积面积图中的点击事件
【发布时间】：2016-09-08 16:56:52
【问题描述】：

当我单击 angular-nvD3 堆积面积图时，我试图阻止默认行为。我设法访问了 onclick 功能，但我不知道如何防止事件（修改图形）发生。当用户点击它时，我不希望图形发生变化。

.js：

$scope.stackedAreaChartOptions = {
  chart: {
    type: 'stackedAreaChart',
    height: 450,
    margin : {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    },
    x: function(d){return d[0];},
    y: function(d){return d[1];},
    useVoronoi: false,
    clipEdge: true,
    duration: 100,
    useInteractiveGuideline: true,
    xAxis: {
      showMaxMin: false,
      tickFormat: function(d) {
        return d3.time.format('%H:%M')(new Date(d))
      }
    },
    yAxis: {
      tickFormat: function(d){
        return d3.format(',.2f')(d);
      }
    },
    zoom: {
      enabled: false,
      scaleExtent: [1, 10],
      useFixedDomain: false,
      useNiceScale: false,
      horizontalOff: false,
      verticalOff: true,
      unzoomEventType: 'dblclick.zoom'
    },
    //chart events
    stacked: {
      dispatch: {

        areaClick:
        function (t,u){ null; console.log("areaClick");}
        ,
        areaMouseover:
        function (t,u){ null; console.log("areaMouseover");}
        ,
        areaMouseout:
        function (t,u){null; console.log("areaMouseout");}
        ,
        renderEnd:
        function (t,u){null; console.log("renderEnd");}
        ,
        elementClick:
        function (t,u){null; console.log("elementClick");}
        ,
        elementMouseover:
        function (t,u){null; console.log("elementMouseover");}
        ,
        elementMouseout:
        function (t,u){ null;console.log("elementMouseout");}
      }
    },
    controlLabels: {stacked:"Absoluto", expanded:"Relativo"},
    controlOptions:
    [
      "Stacked",
      false,
      "Expanded"
    ]

  },
  title: {
    enable: true,
    text: '',
    css: {
      'font-weight': 'bold'
    }
  },
  caption: {
    enable: true,
    html: 'Visualización por horas de acceso a noticia',
    css: {
      'text-align': 'center',
      'margin': '2px 13px 0px 7px',
      'font-style': 'italic'
    }
  }
};

HTML：

<nvd3 options="stackedAreaChartOptions" data="stackedAreaChartData" api="api"></nvd3>

当我单击图形时，正在显示消息 (console.log)，但我需要防止单击事件发生。

【问题讨论】：

CSS pointer-events:none;

标签： javascript angularjs nvd3.js angular-nvd3

【解决方案1】：

我知道这是一个老问题，但我在我的项目中遇到了这个问题，这就是我解决它的方法。

似乎无法使用 angular-nvd3 禁用这些事件。您必须使用 NVD3 禁用它们。

获取 angular-nvd3 图表上可用的图表 api 对象并禁用绑定到此 api 的图表对象上的事件：

HTML

<nvd3 options="options" data="data" api="chartAPI"></nvd3>

Javascript

 $timeout( function() {
  if ($scope.chartAPI) {
    var chart = $scope.chartAPI.getScope().chart;
    chart.stacked.dispatch.on('areaClick.toggle', null);
    chart.stacked.dispatch.on('areaClick', null);
  }
}, 1000);

我做了一个超时确保在进行更改时有chartAPI。

注意：更新或刷新图表时，您似乎必须再次禁用这些事件（chart.refresh()）。

这里的工作示例：https://codepen.io/mvidailhet/pen/JNYJwx Codepen 上的图表更新似乎有问题，但你明白了 :)

希望对你有帮助！

【讨论】：

【解决方案2】：

你很亲密。 CSS pointer-events:none; 的缺点是它会关闭每个指针事件（最重要的是 hover、mouseenter 和 mouseout）。

所以恕我直言，您应该避免使用它。

其实你很接近。您不应该将它不做任何事情的函数而是 null 或 undefined 传递给options.chart.stacked.dispatch.areaClick。像这样：

//chart events
stacked: {
    dispatch: {
        areaClick: void 0
    }
}

我也遇到了同样的问题，花了一个多小时才找到。

编辑

原来我错了。它解决了只是因为它遇到了阻止事件的错误。所以你可以抛出一个错误，一切都很好...... :)

也找到了解决方法，但会导致内存泄漏，所以我不会分享。

我的解决方案是：接受它应用点击事件并隐藏所有其他图层。问题太小，无法投入更多时间和精力。

【讨论】：