角度nvD3のクリックイベントを防止スタックエリアチャート

Question

angle-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）が示されているが、私は防ぐ必要がありますクリックイベントが発生しています。

Answer 1

あなたは近くにいました。 CSS pointer-events:none;は、すべてのポインタイベント（最も重要なのはホバー、マウスセンター、マウスアウト）をオフにするという欠点があります。

だから、あなたはそれを避けるべきです。

実際にあなたは近くにいました。あなたは何もしない関数を渡すべきではなく、代わりにヌルまたは未定義をoptions.chart.stacked.dispatch.areaClickに渡すべきです。このように：

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

私はこの非常に同じ問題を抱えており、それを見つけるのに1時間以上を費やしました。

編集

私は間違っていたことが判明しました。イベントを妨げるエラーが発生したために解決しました。だからあなたはエラーをスローすることができますし、すべてがうまくいます... :)

また、回避策が見つかりましたが、メモリリークの原因となるので、私はそれを共有しません。

私の解決策は、クリックイベントを適用し、他のすべてのレイヤーを非表示にするということです。時間と労力をそれに費やすには小さすぎる問題。

Answer 2

私はこれが古い質問だと知っていますが、私のプロジェクトではこの問題にぶつかります。ここで私はそれをどのように解決しましたか？

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

I変更を行う際にタイムアウトを設定したことを確認してください。

注：あなたがチャート（chart.refresh（））を更新またはリフレッシュすると、再びこれらのイベントを無効にする必要がありそうです。ここ

の作業例は：https://codepen.io/mvidailhet/pen/JNYJwx Codepen上のグラフの更新で不具合があるようだが、

はそれが役に立てば幸い:)あなたはポイントを得ます！