So überschreiben Sie die Ziehereignisse in C3.js
Ich versuche derzeit, eine Zoomfunktion zu implementieren, die sich geringfügig von der bereits vorhandenen unterscheidet.
Eigentlich möchte ich, dass ein Benutzer, wenn er auf das Diagramm klickt und es zieht, auf die so definierte Domäne zoomt. Ich würde es gerne so machen, weil es mit dem Mausrad den Benutzer daran hindert, die Seite nach oben / unten zu bewegen.
Als es scheint nicht möglich zu sein mit demC3.js API
, Ich habe versucht, das Drag-Ereignis zu implementieren, indem ich dieser kleinen exemplarischen Vorgehensweise auf D3.js @ gefolgt biDrag Behavior. Ich habe es jedoch nicht gut verstanden, da es nicht funktioniert, wenn ich es in der Grafik ausprobiere.
Hier ist ein Beispiel meines Codes:
function setHandlers() {
/**
* A custom drag event to zoom on the graph
*/
var drag = d3.behavior.drag();
d3.selectAll('.c3-event-rects').on(".drag", null);
drag
.on('dragstart', function (d) {
d3.event.sourceEvent.stopPropagation();
console.log("start");
console.log(d)
})
.on('drag', function (d) {
console.log("on bouge :)")
})
.on('dragend', function (d) {
console.log("end");
console.log(d)
})
}
Ich rufe diese Funktion immer dann auf, wenn ich mein Diagramm aktualisiere und ich bereits einen benutzerdefinierten Handler für einen Doppelklick codiert habe (in der gleichen Funktion, aber ich habe sie deaktiviert, um es klarer zu machen). Ich möchte wissen, wie ein Drag-Ereignis in einem C3.js-Diagramm erfolgreich ausgelöst werden kann, insbesondere die Dragstart- und Dragend-Ereigniss
Vielen Dank für Ihre Antworten