D3 zoomer avec un Brush

Salut, je dois implémenter un zoom en passant par un brush avec la bibliothèque D3, voici la fonction ou je dois implémenter cette fonction:

Code:

---

1 2 3 4 5 6 7 8 9

function brushUpdate(brush, g, line, xFocus, xContext, xAxis, yAxis) { // mon code actuel: var s = d3.event.selection || xContext.range(); xContext.domain(s.map(xFocus.invert, xFocus)) g.select(".path").attr("d", line) g.select(".axis--x").call(xAxis) g.select(".axis--y").call(yAxis)   }

---

Je vous mets aussi comment sont déclarer les paramètres de la fonction:

brush:

Code:

---

1 2 3 4 5

var brush = d3.brushX() .extent([[0, 0], [widthContext, heightContext]]) .on("brush", function () { brushUpdate(brush, focus, lineFocus, xFocus, xContext, xAxisFocus, yAxisFocus); });

---

focus (renommé "g" dans la fonction):

Code:

---

1 2	var focus = svg.append("g") .attr("transform", "translate(" + marginFocus.left + "," + marginFocus.top + ")");

---

line:

Code:

---

1 2 3 4

d3.line() .x(function(d) { return x(d.date);}) .y(function(d) { return y(d.count);}) .curve(d3.curveBasisOpen)

---

xFocus

Code:

---

var xFocus = d3.scaleTime().range([0, widthFocus]);

---

xContext

Code:

---

var xContext = d3.scaleTime().range([0, widthContext]);

---

xAxis

Code:

---

var xAxisFocus = d3.axisBottom(xFocus).tickFormat(localization.getFormattedDate);

---

Il y a deux graphiques dans mon cas, Context qui est la vue générale qui se trouve en bas de Focus qui est un graphique qui montre ce qui a été sélectionné sur Context. Si vous avez besoin d'autres informations, voici le lien github du projet.

Je dois donc juste mettre à jour les données en x sur Focus, en ne touchant pas à Context ou l'axe y de Focus

J'ai essayé de regarder plusieurs tutos et la doc mais je suis nouveau sur JS et je n'ai pas réussi à faire ce que je voulais, d'ailleurs le code actuel ne fait rien apparemment mais je ne sais pas pourquoi :/