防止角度nvD3中的单击事件堆积面积图

我试图防止默认行为，当我点击角nvD3堆积面积图。我设法访问了onclick函数，但我不知道如何防止事件（修改图形）发生。我不希望图形在用户点击时发生变化。防止角度nvD3中的单击事件堆积面积图

的.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）被显示，但我需要防止发生点击事件。

来源

2016-09-08 Erick Ramírez

CSS'pointer-events：none;' – zer00ne

您近距离了。 CSS pointer-events:none;有缺点，它关闭每个指针事件（最重要的是悬停，mouseenter和mouseout）。

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

其实你是亲密的。你不应该传递一个it-does-nothing函数，而是将其空或者undefined传递给options.chart.stacked.dispatch.areaClick。像这样：

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

我有这个非常相同的问题，花了一个多小时才找到它。

编辑

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

也发现一个解决方法，但这会导致内存泄漏，所以我不会分享。

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

来源

2017-02-03 11:26:36

我知道这是一个老问题，但我遇到了这个问题，我的项目，这里是我如何解决它。

似乎不可能使用angular-nvd3禁用这些事件。您必须使用NVD3禁用它们。

让您的角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毛刺，但你明白了吧:)

希望它能帮助！

来源

2017-04-18 10:02:01 Mitch

防止角度nvD3中的单击事件堆积面积图

回答

相关问题