Verhindern von Klickereignissen in eckigen nvD3 Stacked Area Chart

Question

Ich versuche das Standardverhalten zu verhindern, wenn ich auf das angular-nvD3 Stacked Area Chart klicke. Ich habe es geschafft, auf die onclick-Funktion zuzugreifen, aber ich weiß nicht, wie ich verhindern kann, dass das Ereignis (modifiziert die Grafik) passiert. Ich möchte nicht, dass sich die Grafik ändert, wenn der Benutzer darauf klickt.

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> 

Wenn ich auf die Grafik klicken, werden die Nachrichten (console.log) gezeigt werden, aber ich brauche zu verhindern Das Click-Ereignis wird ausgelöst.

Answer 1

Sie waren in der Nähe. CSS pointer-events:none; hat den Nachteil, dass es jedes Zeigerereignis ausschaltet (vor allem Hover, Mouseenter und Mouseout).

Also IMHO sollten Sie es vermeiden, es zu verwenden.

Eigentlich waren Sie in der Nähe. Sie sollten keine It-Does-Nothing-Funktion, sondern null oder undefined statt options.chart.stacked.dispatch.areaClick übergeben. Gefällt mir:

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

Ich hatte dieses Problem und verbrachte mehr als eine Stunde, um es herauszufinden.

BEARBEITEN

Es stellte sich heraus, dass ich falsch lag. Es wurde nur dadurch gelöst, dass ein Fehler auftrat, der das Ereignis verhinderte. So können Sie einen Fehler und alles ist in Ordnung ... :)

Auch eine Problemumgehung gefunden, aber das Speicherverlust verursacht, so werde ich das nicht teilen.

Meine Lösung war: akzeptieren Sie, dass es Click-Ereignis gilt und alle anderen Ebenen verbirgt. Zu kleines Problem, um mehr Zeit und Mühe darin zu investieren.

Answer 2

Ich weiß, das ist eine alte Frage, aber ich stoße auf dieses Problem für mein Projekt und hier ist, wie ich es gelöst habe.

Es scheint, dass es nicht möglich ist, diese Ereignisse mit angular-nvd3 zu deaktivieren. Sie müssen sie mit NVD3 deaktivieren.

das Objekt verfügbar Chart api Holen Sie sich auf Ihre Winkel nvd3 Diagramm und die Ereignisse auf dem Chart-Objekt zu diesem api binded deaktivieren:

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 Wenn Sie ein Zeitlimit setzen, stellen Sie sicher, dass Sie die chartAPI haben, wenn Sie die Änderungen vornehmen.

Hinweis: Es scheint, dass Sie diese Ereignisse erneut deaktivieren müssen, wenn Sie das Diagramm aktualisieren oder aktualisieren (chart.refresh()).

Arbeitsbeispiel hier: https://codepen.io/mvidailhet/pen/JNYJwx Es scheint, dass es eine Störung auf Codepen im Chart-Update ist, aber Sie erhalten den Punkt :)

Hoffe, es hilft!